feat: dark mode

src/components/options/ColorSelector.tsx

@@ -30,7 +30,7 @@ const ColorSelector: React.FC<ColorSelectorProps & TextFieldProps> = ({
     <Box mb={1}>
       <Stack direction={'row'}>
         <TextField
-          sx={{ backgroundColor: 'white' }}
+          sx={{ backgroundColor: 'background.paper' }}
           value={color}
           onChange={handleColorChange}
           {...props}

src/components/options/TextFieldWithDesc.tsx

@@ -19,7 +19,7 @@ const TextFieldWithDesc = ({
     <Box>
       <TextField
         placeholder={placeholder}
-        sx={{ backgroundColor: 'white' }}
+        sx={{ backgroundColor: 'background.paper' }}
         value={value}
         onChange={(event) => onOwnChange(event.target.value)}
         {...props}

src/components/options/ToolOptions.tsx

@@ -36,7 +36,7 @@ export default function ToolOptions<T extends FormikValues>({
         mb: 2,
         borderRadius: 2,
         padding: 2,
-        backgroundColor: theme.palette.background.default,
+        backgroundColor: 'background.lightSecondary',
         boxShadow: '2'
       }}
       mt={2}