Fix/agentflow Fixed theming for dark mode in agentflow (#6234)

j-sanaa · web-flow · commit 11a9c924a294 · 2026-04-16T09:53:49.000-07:00
* To highlight input fiels in dark mode

* Fix background color of edit node dialog

* Fix background color for input messages field

* Fix Message container

* Fix border container color

* Make token be referenced by name

* Revert changes to server file

* Fix gemini comments
diff --git a/packages/agentflow/src/atoms/ArrayInput.tsx b/packages/agentflow/src/atoms/ArrayInput.tsx
@@ -132,7 +132,7 @@ export function ArrayInput({
                             mt: 2,
                             mb: 1,
                             border: 1,
-                            borderColor: theme.palette.grey[300],
+                            borderColor: theme.palette.divider,
                             borderRadius: 2,
                             position: 'relative'
                         }}
diff --git a/packages/agentflow/src/atoms/ConditionBuilder.tsx b/packages/agentflow/src/atoms/ConditionBuilder.tsx
@@ -106,7 +106,7 @@ export function ConditionBuilder({
                             mt: 2,
                             mb: 1,
                             border: 1,
-                            borderColor: theme.palette.grey[300],
+                            borderColor: theme.palette.divider,
                             borderRadius: 2,
                             position: 'relative'
                         }}
@@ -158,7 +158,7 @@ export function ConditionBuilder({
                     mt: 2,
                     mb: 1,
                     border: 1,
-                    borderColor: theme.palette.grey[300],
+                    borderColor: theme.palette.divider,
                     borderRadius: 2,
                     backgroundColor: theme.palette.action.hover
                 }}
diff --git a/packages/agentflow/src/atoms/CredentialTypeSelector.tsx b/packages/agentflow/src/atoms/CredentialTypeSelector.tsx
@@ -1,7 +1,7 @@
 import { type SyntheticEvent, useState } from 'react'
 
 import { Box, InputAdornment, List, ListItemButton, OutlinedInput, Typography } from '@mui/material'
-import { alpha, useTheme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 import { IconKey, IconSearch, IconX } from '@tabler/icons-react'
 
 import type { ComponentCredentialSchema } from '@/core/types'
@@ -66,7 +66,7 @@ export function CredentialTypeSelector({ schemas, apiBaseUrl, onSelect }: Creden
                         onClick={() => onSelect(schema)}
                         sx={{
                             border: 1,
-                            borderColor: alpha(theme.palette.grey[900], 0.25),
+                            borderColor: theme.palette.divider,
                             borderRadius: 2,
                             display: 'flex',
                             alignItems: 'center',
diff --git a/packages/agentflow/src/atoms/Dropdown.tsx b/packages/agentflow/src/atoms/Dropdown.tsx
@@ -1,6 +1,6 @@
 import { Box, FormControl, Popper, TextField, Typography } from '@mui/material'
 import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete'
-import { alpha, styled, useTheme } from '@mui/material/styles'
+import { styled, useTheme } from '@mui/material/styles'
 
 const StyledPopper = styled(Popper)({
     boxShadow: '0px 8px 10px -5px rgb(0 0 0 / 20%), 0px 16px 24px 2px rgb(0 0 0 / 14%), 0px 6px 30px 5px rgb(0 0 0 / 12%)',
@@ -79,7 +79,7 @@ export function Dropdown({
                                 '& .MuiInputBase-root': {
                                     height: '100%',
                                     '& fieldset': {
-                                        borderColor: alpha(theme.palette.grey[900], 0.25)
+                                        borderColor: theme.palette.divider
                                     }
                                 }
                             }}
diff --git a/packages/agentflow/src/atoms/MessagesInput.tsx b/packages/agentflow/src/atoms/MessagesInput.tsx
@@ -127,10 +127,11 @@ export function MessagesInput({ inputParam, data, disabled = false, variableItem
                     key={effectiveKeys[index]}
                     sx={{
                         p: 2,
+                        mx: 2,
                         mt: 2,
                         mb: 1,
                         border: 1,
-                        borderColor: theme.palette.grey[900] + 25,
+                        borderColor: theme.palette.divider,
                         borderRadius: 2,
                         position: 'relative'
                     }}
diff --git a/packages/agentflow/src/atoms/RichTextEditor.tsx b/packages/agentflow/src/atoms/RichTextEditor.tsx
@@ -78,20 +78,19 @@ const StyledEditorContent = styled(EditorContent, {
             overflowX: rows ? 'auto' : 'hidden',
             lineHeight: rows ? `${tokens.typography.rowHeightRem}em` : `${tokens.typography.singleLineLineHeightEm}em`,
             fontWeight: 500,
-            color: disabled ? theme.palette.action.disabled : theme.palette.grey[900],
-            border: `1px solid ${theme.palette.grey[900]}25`,
+            color: disabled ? theme.palette.action.disabled : theme.palette.text.primary,
+            border: `1px solid ${tokens.colors.border.input[mode]}`,
             borderRadius: '10px',
-            backgroundColor:
-                (theme.palette as { textBackground?: { main: string } }).textBackground?.main ?? theme.palette.background.paper,
+            backgroundColor: tokens.colors.background.input[mode],
             boxSizing: 'border-box',
             whiteSpace: rows ? 'pre-wrap' : 'nowrap',
 
             '&:hover': {
-                borderColor: disabled ? `${theme.palette.grey[900]}25` : theme.palette.text.primary,
+                borderColor: disabled ? tokens.colors.border.input[mode] : theme.palette.text.primary,
                 cursor: disabled ? 'default' : 'text'
             },
             '&:focus': {
-                borderColor: disabled ? `${theme.palette.grey[900]}25` : theme.palette.primary.main,
+                borderColor: disabled ? tokens.colors.border.input[mode] : theme.palette.primary.main,
                 outline: 'none'
             },
 
diff --git a/packages/agentflow/src/atoms/ScenariosInput.tsx b/packages/agentflow/src/atoms/ScenariosInput.tsx
@@ -98,7 +98,7 @@ export function ScenariosInput({ inputParam, data, disabled = false, onDataChang
                             mt: 2,
                             mb: 1,
                             border: 1,
-                            borderColor: theme.palette.grey[300],
+                            borderColor: theme.palette.divider,
                             borderRadius: 2,
                             position: 'relative'
                         }}
@@ -149,7 +149,7 @@ export function ScenariosInput({ inputParam, data, disabled = false, onDataChang
                     mt: 2,
                     mb: 1,
                     border: 1,
-                    borderColor: theme.palette.grey[300],
+                    borderColor: theme.palette.divider,
                     borderRadius: 2,
                     backgroundColor: theme.palette.action.hover
                 }}
diff --git a/packages/agentflow/src/atoms/StateKeyValueInput.tsx b/packages/agentflow/src/atoms/StateKeyValueInput.tsx
@@ -66,7 +66,7 @@ export function StateKeyValueInput({ value, onChange, disabled = false, suggesti
                         mt: 1,
                         mb: 1,
                         border: 1,
-                        borderColor: theme.palette.grey[300],
+                        borderColor: theme.palette.divider,
                         borderRadius: 2,
                         position: 'relative'
                     }}
diff --git a/packages/agentflow/src/atoms/StructuredOutputBuilder.tsx b/packages/agentflow/src/atoms/StructuredOutputBuilder.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 
 import { Box, Button, Chip, IconButton, MenuItem, Select, TextField, Typography } from '@mui/material'
-import { alpha, useTheme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 import { IconArrowsMaximize, IconPlus, IconTrash } from '@tabler/icons-react'
 
 import { ExpandTextDialog } from '@/atoms'
@@ -103,7 +103,7 @@ export function StructuredOutputBuilder({ inputParam, data, disabled = false, on
                         mt: 2,
                         mb: 1,
                         border: 1,
-                        borderColor: alpha(theme.palette.grey[900], 0.25),
+                        borderColor: theme.palette.divider,
                         borderRadius: 2,
                         position: 'relative'
                     }}
diff --git a/packages/agentflow/src/atoms/VariableInput.tsx b/packages/agentflow/src/atoms/VariableInput.tsx
@@ -62,20 +62,19 @@ const StyledEditorContent = styled(EditorContent, {
             overflowX: rows ? 'auto' : 'hidden',
             lineHeight: rows ? `${tokens.typography.rowHeightRem}em` : `${tokens.typography.singleLineLineHeightEm}em`,
             fontWeight: 500,
-            color: disabled ? theme.palette.action.disabled : theme.palette.grey[900],
-            border: `1px solid ${theme.palette.grey[900]}25`,
+            color: disabled ? theme.palette.action.disabled : theme.palette.text.primary,
+            border: `1px solid ${tokens.colors.border.input[mode]}`,
             borderRadius: '10px',
-            backgroundColor:
-                (theme.palette as { textBackground?: { main: string } }).textBackground?.main ?? theme.palette.background.paper,
+            backgroundColor: tokens.colors.background.input[mode],
             boxSizing: 'border-box',
             whiteSpace: rows ? 'pre-wrap' : 'nowrap',
 
             '&:hover': {
-                borderColor: disabled ? `${theme.palette.grey[900]}25` : theme.palette.text.primary,
+                borderColor: disabled ? tokens.colors.border.input[mode] : theme.palette.text.primary,
                 cursor: disabled ? 'default' : 'text'
             },
             '&:focus': {
-                borderColor: disabled ? `${theme.palette.grey[900]}25` : theme.palette.primary.main,
+                borderColor: disabled ? tokens.colors.border.input[mode] : theme.palette.primary.main,
                 outline: 'none'
             },
 
diff --git a/packages/agentflow/src/core/theme/createAgentflowTheme.ts b/packages/agentflow/src/core/theme/createAgentflowTheme.ts
@@ -58,6 +58,22 @@ export function createAgentflowTheme(isDarkMode: boolean): Theme {
                         backgroundImage: 'none'
                     }
                 }
+            },
+            MuiOutlinedInput: {
+                styleOverrides: {
+                    root: {
+                        backgroundColor: tokens.colors.background.input[mode]
+                    }
+                }
+            },
+            MuiAutocomplete: {
+                styleOverrides: {
+                    option: {
+                        '&:hover': {
+                            background: isDarkMode ? `${tokens.colors.background.optionHover.dark} !important` : undefined
+                        }
+                    }
+                }
             }
         },
         spacing: 8, // MUI's default base unit
diff --git a/packages/agentflow/src/core/theme/tokens.ts b/packages/agentflow/src/core/theme/tokens.ts
@@ -28,13 +28,18 @@ const baseColors = {
     gray800: '#333',
 
     // Dark mode grays
+    darkBorderDefault: 'rgba(255, 255, 255, 0.145)',
     darkGray100: '#1a1a1a',
     darkGray200: '#1a1a2e',
     darkGray300: '#252525',
+    darkGray350: '#23262c',
     darkGray400: '#2d2d2d',
+    darkGray450: '#32353b',
     darkGray500: '#404040',
+    darkBlueHover: '#233345',
     darkGray600: '#525252',
     darkGray700: '#555',
+    darkGray750: '#888',
     darkGray800: '#aaa',
 
     // Status colors
@@ -117,14 +122,17 @@ export const tokens = {
         background: {
             canvas: { light: baseColors.gray100, dark: baseColors.darkGray100 },
             palette: { light: baseColors.gray50, dark: baseColors.darkGray300 },
-            card: { light: baseColors.white, dark: baseColors.darkGray400 },
+            card: { light: baseColors.white, dark: baseColors.darkGray350 },
             cardHover: { light: baseColors.gray75, dark: baseColors.darkGray500 },
-            header: { light: baseColors.white, dark: baseColors.darkGray400 }
+            header: { light: baseColors.white, dark: baseColors.darkGray400 },
+            input: { light: baseColors.white, dark: baseColors.darkGray450 },
+            optionHover: { light: '', dark: baseColors.darkBlueHover }
         },
 
         border: {
-            default: { light: baseColors.gray300, dark: baseColors.darkGray500 },
+            default: { light: baseColors.gray300, dark: baseColors.darkBorderDefault },
             hover: { light: baseColors.gray400, dark: baseColors.darkGray600 },
+            input: { light: baseColors.gray400, dark: baseColors.darkGray750 },
             validation: baseColors.nodeCondition
         },
 
diff --git a/packages/agentflow/src/features/node-editor/ConfigInput.tsx b/packages/agentflow/src/features/node-editor/ConfigInput.tsx
@@ -2,7 +2,7 @@ import { type ComponentType, useCallback, useEffect, useMemo, useRef, useState }
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '@mui/material'
-import { alpha, useTheme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
 import { IconSettings } from '@tabler/icons-react'
 
 import { type AsyncInputProps, NodeInputHandler } from '@/atoms'
@@ -202,7 +202,7 @@ export function ConfigInput({
                 mt: 1,
                 mb: 1,
                 border: 1,
-                borderColor: alpha(theme.palette.grey[900], 0.25),
+                borderColor: theme.palette.divider,
                 borderRadius: 2
             }}
         >
diff --git a/packages/agentflow/src/features/node-palette/AddNodesDrawer.tsx b/packages/agentflow/src/features/node-palette/AddNodesDrawer.tsx
@@ -221,7 +221,7 @@ function AddNodesDrawerComponent({ nodes, onDragStart, onNodeClick }: AddNodesDr
                                                             cursor: 'pointer',
                                                             color: theme.palette.grey[500],
                                                             '&:hover': {
-                                                                color: theme.palette.grey[900]
+                                                                color: theme.palette.text.primary
                                                             }
                                                         }}
                                                         onClick={handleClearSearch}
