From 18a3a727cb7ca493bc5d10a2a6f2930b1c592860 Mon Sep 17 00:00:00 2001 From: Jason Kneen Date: Thu, 23 Oct 2025 21:26:55 +0100 Subject: [PATCH] Implement Dark mode Add dark mode support and theme toggle UI Introduces dark mode support across the app by updating color classes to use semantic tokens and CSS variables, and adds a theme toggle component to the UI. Updates workflow builder panels, modals, and node styles for dark mode compatibility. Also includes a blocking script to prevent theme flash, updates .gitignore for Clerk and server node_modules, and adds theme utility files. --- .gitignore | 6 +- app/layout.tsx | 22 +- app/page.tsx | 24 +- .../sections/hero/Background/Background.tsx | 34 +- .../app/(home)/sections/hero/Pixi/Pixi.tsx | 26 +- .../hero/Pixi/tickers/features/cell.ts | 5 +- .../sections/step2/Step2Placeholder.tsx | 36 +- .../workflow-builder/ConfirmDialog.tsx | 6 +- .../ConnectionMapperModal.tsx | 18 +- .../workflow-builder/ConnectorsPanel.tsx | 42 +- .../sections/workflow-builder/CustomNodes.tsx | 32 +- .../workflow-builder/DataNodePanel.tsx | 66 +- .../workflow-builder/EdgeLabelModal.tsx | 32 +- .../workflow-builder/ExecutionPanel.tsx | 144 +- .../ExportLangGraphButton.tsx | 2 +- .../workflow-builder/ExtractNodePanel.tsx | 48 +- .../workflow-builder/HTTPNodePanel.tsx | 44 +- .../workflow-builder/LogicNodePanel.tsx | 150 +- .../sections/workflow-builder/MCPPanel.tsx | 16 +- .../workflow-builder/NodeArgumentsPanel.tsx | 22 +- .../sections/workflow-builder/NodePanel.tsx | 112 +- .../workflow-builder/NoteNodePanel.tsx | 12 +- .../workflow-builder/OutputSchemaPanel.tsx | 24 +- .../workflow-builder/PasteConfigModal.tsx | 10 +- .../workflow-builder/PreviewPanel.tsx | 28 +- .../workflow-builder/PublishModal.tsx | 32 +- .../workflow-builder/SaveAsTemplateModal.tsx | 46 +- .../workflow-builder/SettingsPanelSimple.tsx | 239 +- .../workflow-builder/ShareWorkflowModal.tsx | 46 +- .../workflow-builder/StartNodePanel.tsx | 46 +- .../workflow-builder/TestEndpointPanel.tsx | 62 +- .../workflow-builder/ToolsNodePanel.tsx | 96 +- .../UniversalOutputSelector.tsx | 18 +- .../VariableReferencePicker.tsx | 22 +- .../workflow-builder/WorkflowBuilder.tsx | 391 +- .../workflow-builder/WorkflowNameEditor.tsx | 6 +- .../shared/color-styles/color-styles.tsx | 30 + components/shared/header/_svg/Logo.tsx | 19 +- components/shared/layout/curvy-rect.tsx | 10 +- components/ui/theme-toggle.tsx | 83 + convex/auth.config.ts | 4 +- convex/tsconfig.tsbuildinfo | 2 +- langflow.md | 239 + lib/theme.ts | 77 + pnpm-lock.yaml | 10972 ++++++++++++++++ styles/design-system/colors.css | 13 + styles/main.css | 45 +- styles/workflow-execution.css | 35 + tailwind.config.ts | 36 +- 49 files changed, 12598 insertions(+), 932 deletions(-) create mode 100644 components/ui/theme-toggle.tsx create mode 100644 langflow.md create mode 100644 lib/theme.ts create mode 100644 pnpm-lock.yaml diff --git a/.gitignore b/.gitignore index 9ca0d6a..5aab7ea 100644 --- a/.gitignore +++ b/.gitignore @@ -46,4 +46,8 @@ certificates post_migrator.py # Server -firecrawl-responses-api/.env \ No newline at end of file +server/node_modules +firecrawl-responses-api/.env + +# clerk configuration (can include secrets) +/.clerk/ diff --git a/app/layout.tsx b/app/layout.tsx index d4699c1..52add20 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -9,6 +9,8 @@ import { ConvexReactClient } from "convex/react"; import ColorStyles from "@/components/shared/color-styles/color-styles"; import Scrollbar from "@/components/ui/scrollbar"; import { BigIntProvider } from "@/components/providers/BigIntProvider"; +import { getThemeBlockingScript } from "@/lib/theme"; + import "styles/main.css"; const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!); @@ -30,21 +32,27 @@ export default function RootLayout({ return ( - + + {/* Block rendering until theme is loaded to prevent flash */} +