Implement Dark mode #10
Conversation
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.
There was a problem hiding this comment.
Pull Request Overview
This PR implements comprehensive dark mode support across the application, adding a theme toggle UI component and updating color classes throughout to use semantic tokens and CSS variables. The implementation includes a blocking script to prevent theme flash on page load, updates to workflow builder panels and node styles for dark mode compatibility, and theme utility functions for managing user preferences.
Key Changes:
- Added theme toggle component with size variants and localStorage persistence
- Introduced semantic color tokens (background, foreground, card, etc.) in Tailwind config
- Updated all UI components to use theme-aware color classes
- Implemented dark mode styles for React Flow components (controls, minimap)
Reviewed Changes
Copilot reviewed 47 out of 49 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tailwind.config.ts | Added dark mode class strategy and semantic color tokens for theme support |
| styles/workflow-execution.css | Added dark mode styles for React Flow controls and minimap |
| styles/main.css | Defined CSS variables for light/dark themes including workflow-specific tokens |
| styles/design-system/colors.css | Added dark mode color overrides for borders and illustrations |
| lib/theme.ts | Created theme utility functions for preference management and blocking script |
| langflow.md | Added integration documentation (appears to be an accidental inclusion) |
| convex/tsconfig.tsbuildinfo | Build artifact update |
| convex/auth.config.ts | Updated Clerk domain configuration |
| components/ui/theme-toggle.tsx | New theme toggle component with size variants |
| components/shared/layout/curvy-rect.tsx | Updated connector components to use CSS variables |
| components/shared/header/_svg/Logo.tsx | Updated logo to use currentColor for dark mode compatibility |
| components/shared/color-styles/color-styles.tsx | Added dark mode color overrides |
| components/app/(home)/sections/workflow-builder/*.tsx | Updated all workflow builder panels with dark mode color classes |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| # Langflow Integration Guide | ||
|
|
||
| ## Overview |
There was a problem hiding this comment.
This file appears to be unrelated to the dark mode implementation and may have been accidentally included in this PR. Consider removing it or creating a separate PR for Langflow integration documentation.
| // Set via: npx convex env set CLERK_JWT_ISSUER_DOMAIN "https://..." | ||
| domain: "https://oriented-quetzal-4.clerk.accounts.dev", | ||
| // Set via: npx convex env set CLERK_JWT_ISSUER_DOMAIN \"https://...\" | ||
| domain: "https://safe-sloth-86.clerk.accounts.dev", |
There was a problem hiding this comment.
The Clerk domain change appears unrelated to dark mode implementation. This configuration change should be in a separate commit or PR to maintain clear change history.
| domain: "https://safe-sloth-86.clerk.accounts.dev", | |
| domain: "https://your-previous-clerk-domain.clerk.accounts.dev", |
| // Listen for system preference changes | ||
| const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); | ||
| const handleChange = (e: MediaQueryListEvent) => { | ||
| const currentTheme = getCurrentTheme(); |
There was a problem hiding this comment.
The variable currentTheme is declared but never used in this function. Consider removing it to clean up the code.
| const currentTheme = getCurrentTheme(); |
| }) | ||
| ); | ||
| }, [currentNodeId, nodeResults, selectedEdgeId, setNodes, setEdges]); | ||
| }, [currentNodeId, nodeResults, selectedEdgeId]); |
There was a problem hiding this comment.
The useEffect dependencies have been changed to remove setNodes and setEdges, but these functions are still used inside the effect callback. This could lead to stale closures. Either add them back to the dependencies or use functional updates within the effect.
1 participant
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.