样式系统和主题

相关源文件

• src/frontend/src/App.css
• src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
• src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx
• src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/components/build-status-display.tsx
• src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
• src/frontend/src/CustomNodes/GenericNode/components/nodeIcon/index.tsx
• src/frontend/src/CustomNodes/NoteNode/index.tsx
• src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
• src/frontend/src/components/core/chatComponents/ContentBlockDisplay.tsx
• src/frontend/src/components/core/chatComponents/DurationDisplay.tsx
• src/frontend/src/components/core/jsonOutputComponent/json-output-view.tsx
• src/frontend/src/constants/constants.ts
• src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/shortcutDisplay/index.tsx
• src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
• src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
• src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/CellRenderWrapper/index.tsx
• src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx
• src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/index.tsx
• src/frontend/src/stores/shortcuts.ts
• src/frontend/src/stores/typesStore.ts
• src/frontend/src/style/applies.css
• src/frontend/src/style/classes.css
• src/frontend/src/style/index.css
• src/frontend/src/types/store/index.ts
• src/frontend/src/types/zustand/globalVariables/index.ts
• src/frontend/src/types/zustand/types/index.ts
• src/frontend/src/utils/styleUtils.ts
• src/frontend/tailwind.config.mjs
• src/frontend/tests/extended/features/sticky-notes.spec.ts

本文档涵盖了 Langflow 全面的样式架构，包括主题系统、颜色管理、Tailwind CSS 配置和样式工具。该系统通过支持浅色和深色主题、不同组件类型的动态配色方案以及广泛的自定义功能，为整个应用程序提供了一致的视觉设计语言。

有关 UI 组件及其实现的信息，请参阅 用户界面与样式。有关聊天界面样式细节，请参阅 聊天与消息界面。

主题架构

Langflow 实现了一个基于 CSS 自定义属性的主题系统，通过一套全面的设计标记支持浅色和深色模式。

CSS 变量系统

主题系统围绕两个主要上下文定义的 CSS 自定义属性展开

来源：src/frontend/src/style/index.css8-463

主题切换实现

通过 CSS 类切换实现深色主题

来源：src/frontend/src/stores/darkStore.ts src/frontend/src/style/index.css205-463

颜色系统

节点类型颜色映射

Langflow 为不同的节点类型和数据类型使用复杂的颜色映射系统

来源：src/frontend/src/utils/styleUtils.ts84-185

渐变系统

该系统包含各种 UI 元素的预定义渐变

来源：src/frontend/src/utils/styleUtils.ts14-82

Tailwind CSS 配置

扩展配置

Langflow 扩展了 Tailwind CSS，为设计系统提供了自定义配置

来源：src/frontend/tailwind.config.mjs10-400

动画系统

配置包括自定义动画以增强用户体验

来源：src/frontend/tailwind.config.mjs45-111

样式工具

样式工具函数

styleUtils.ts 文件提供了全面的样式管理工具函数

来源：src/frontend/src/utils/styleUtils.ts1-529

文件类型和组件样式

系统包含针对不同文件类型和 UI 组件的专用样式

来源：src/frontend/src/utils/styleUtils.ts187-287

组件级样式

CSS 类组织

样式系统将 CSS 类组织成逻辑组

来源：src/frontend/src/style/applies.css1-1900 src/frontend/src/style/classes.css1-444 src/frontend/src/App.css1-226

节点样式系统

节点根据其状态和类型获得动态样式

来源：src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx190-232 src/frontend/src/style/applies.css338-376

组件与主题集成

组件主题响应

组件通过 CSS 自定义属性和 Tailwind 类与主题系统集成

来源：src/frontend/src/CustomNodes/GenericNode/components/nodeIcon/index.tsx28-31 src/frontend/src/CustomNodes/hooks/use-icons-status.tsx4-39

键盘快捷键样式

系统包含用于键盘快捷键显示的专用样式

来源：src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/shortcutDisplay/index.tsx1-40 src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx1-28 src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/CellRenderWrapper/index.tsx1-8

构建和状态指示器样式

系统为组件构建状态和验证状态提供视觉反馈

来源：src/frontend/src/CustomNodes/hooks/use-icons-status.tsx1-41 src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/components/build-status-display.tsx1-74 src/frontend/src/components/core/chatComponents/DurationDisplay.tsx1-69