Add automatic background change when toggling between light & dark

Author: PeterTYLiu

package-lock.json

@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
-    "@types/lodash": "^4.17.23",
+    "@types/lodash": "^4.17.24",
     "@types/node": "^24.10.13",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

package.json

@@ -1,6 +1,5 @@
 import { Box, Typography } from "@mui/material";
 import type { PropsWithChildren, ReactNode } from "react";
-import { DIVIDER_COLOR } from "../../constants";
 
 export interface FieldGroupContainerProps {
   title?: string;
@@ -15,7 +14,7 @@ export const FieldGroupContainer = ({ title, actions, children }: PropsWithChild
       sx={{
         p: 2,
         borderBottom: 1,
-        borderColor: DIVIDER_COLOR,
+        borderColor: "divider",
       }}
     >
       {hasHeader && (

src/components/FieldGroupContainer/FieldGroupContainer.tsx

@@ -1,22 +1,44 @@
-import { ToggleButton, ToggleButtonGroup, type PaletteOptions } from "@mui/material";
+import { getLuminance, lighten, ToggleButton, ToggleButtonGroup, type PaletteOptions } from "@mui/material";
+import type { ThemeOptions } from "@mui/material/styles";
+import { DEFAULT_DARK_THEME, DEFAULT_THEME } from "../../constants";
 import { useInnerTheme } from "../../hooks/useInnerTheme";
+import { invertLightness } from "../../utils";
 import { FieldGroupContainer } from "../FieldGroupContainer/FieldGroupContainer";
 import { SubpaletteEditor } from "../SubpaletteEditor/SubpaletteEditor";
 
 const COLORS_BOTTOM: Array<keyof PaletteOptions> = ["secondary", "error", "warning", "info", "success"];
+const defaultDarkBackground = DEFAULT_DARK_THEME.palette.background.default;
+const defaultLightBackground = DEFAULT_THEME.palette.background.default;
 
 export const PaletteEditor = () => {
   const { theme, mergeThemeOptions } = useInnerTheme();
+  const currentMode = theme.palette.mode;
+  const isLight = currentMode === "light";
+  const { default: defaultBg } = theme.palette.background;
   return (
     <>
       <FieldGroupContainer>
         <ToggleButtonGroup
           fullWidth
-          value={theme.palette.mode}
+          value={currentMode}
           exclusive
           onChange={(_, value: "light" | "dark" | null) => {
             if (!value) return;
-            mergeThemeOptions({ palette: { mode: value } });
+            const newTheme: ThemeOptions = { palette: { mode: value } };
+            const isNotDefaultBg = defaultBg !== (isLight ? defaultLightBackground : defaultDarkBackground);
+            const isDarkAndUsingDarkBg = !isLight && getLuminance(defaultBg) < 0.3;
+            const isLightAndUsingLightBg = isLight && getLuminance(defaultBg) > 0.3;
+
+            // Automatically adjust the background if switching modes
+            if (isNotDefaultBg && (isLightAndUsingLightBg || isDarkAndUsingDarkBg)) {
+              const newBackground = invertLightness(defaultBg);
+              newTheme!.palette!.background = {
+                paper: isLight ? newBackground : lighten(newBackground, Math.min(1, 1.3 - getLuminance(newBackground))),
+                default: newBackground,
+              };
+            }
+
+            mergeThemeOptions(newTheme);
           }}
         >
           <ToggleButton value="light">Light</ToggleButton>

src/components/PaletteEditor/PaletteEditor.tsx

@@ -55,7 +55,7 @@ export const SubpaletteEditor = ({ name, manual = [], derived = [] }: Subpalette
           name={name + key}
           title={key}
           key={key}
-          isDefault={theme.palette[name][key] === PALETTES[mode][name][key]}
+          isDefault={theme.palette[name][key] === toStandardHex(PALETTES[mode][name][key])}
           value={toStandardHex(theme.palette[name][key])}
           onChange={(hex) =>
             mergeThemeOptions({

src/components/SubpaletteEditor/SubpaletteEditor.tsx

@@ -1,7 +1,6 @@
 import { Code, Edit } from "@mui/icons-material";
 import { Paper, Tab, Tabs } from "@mui/material";
 import { Activity, useState } from "react";
-import { DIVIDER_COLOR } from "../../constants";
 import { CodePanel } from "../CodePanel/CodePanel";
 import { EditorPanel } from "../EditorPanel/EditorPanel";
 
@@ -16,7 +15,7 @@ export const ToolsPanel = () => {
         flexDirection: "column",
       }}
     >
-      <Tabs variant="fullWidth" onChange={(_, value) => setTab(value)} value={tab} sx={{ borderBottom: 1, borderColor: DIVIDER_COLOR }}>
+      <Tabs variant="fullWidth" onChange={(_, value) => setTab(value)} value={tab} sx={{ borderBottom: 1, borderColor: "divider" }}>
         <Tab icon={<Edit />} iconPosition="start" sx={{ minHeight: "48px" }} label="Editor" value="editor" />
         <Tab icon={<Code />} iconPosition="start" sx={{ minHeight: "48px" }} label="Code" value="code" />
       </Tabs>

src/components/ToolsPanel/ToolsPanel.tsx

@@ -1,6 +1,5 @@
 import { createTheme } from "@mui/material";
 
-export const DIVIDER_COLOR = "grey.800";
 export const DEFAULT_THEME = createTheme({});
 export const DEFAULT_DARK_THEME = createTheme({
   palette: { mode: "dark" },

src/constants.ts

@@ -100,3 +100,18 @@ export const generateEmptyShadows = () => {
   shadows.unshift("none");
   return shadows as Shadows;
 };
+
+// Generated by Claude
+export function invertLightness(hex: string): string {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+
+  // HSL lightness = (max + min) / 2, so its inverse has (max + min) = 510 - original.
+  // Shifting all channels by (255 - (max + min)) achieves this exactly in integer arithmetic.
+  const shift = 255 - (Math.max(r, g, b) + Math.min(r, g, b));
+
+  const clamp = (n: number) => Math.min(255, Math.max(0, n));
+
+  return "#" + intToHex(clamp(r + shift)) + intToHex(clamp(g + shift)) + intToHex(clamp(b + shift));
+}