CSS 变量主题系统

Flow 的视觉风格完全依赖于 CSS 自定义属性（--flow-*），FlowTheme 接口集中罗列所有变量，并通过 applyFlowTheme 统一注入 DOM，轻松实现亮/暗/定制主题。

主题概览

• 所有节点、连线、辅助线、小地图、面板、工具栏都会从主题变量中获取颜色与阴影
• 提供 flowTheme、flowThemeDark 两套默认方案，以及 flowThemePresets 的蓝、绿、紫等配色
• 可通过 createCustomTheme 叠加修改，applyFlowTheme 支持实时切换

主题 API

API	说明
flowTheme / flowThemeDark	明亮 / 暗色默认主题
flowThemePresets	预设主题集合（default、dark、blue、green、purple）
FlowThemeName	主题名字类型，便于限制可选值
createCustomTheme(overrides)	在默认主题基础上合并覆盖，返回新主题对象
applyFlowTheme(theme, target?)	将主题对象应用到指定 DOM 元素（默认为 document.documentElement）

示例

下例通过 applyFlowTheme 为 Flow 配置不同风格，并展示当前主题与预览画布。

开始

审核节点

结束

当前主题：default

主题切换示例

定制指南

1. 按场景选择变量：节点、连线、小地图、面板等各类变量已在 FlowTheme 中列出，可针对不同区域调整颜色或大小。
2. 在应用入口调用 applyFlowTheme：可在页面加载时或用户切换主题时调用，确保样式立即生效。
3. 复用预设 + 自定义覆盖：通过 createCustomTheme 在 flowTheme 基础上覆盖个别变量，保持统一性。