changes to theme selection (#2060)

instead of a toggle for always dark the user can now choose between:

Dark Mode / Light Mode / System

src/renderer/app.tsx

@@ -11,7 +11,7 @@ import { ContextMenuProvider } from './contexts/ContextMenuContext';
 import { HotkeysProvider } from './contexts/HotKeyContext';
 import { useAsyncEffect } from './hooks/useAsyncEffect';
 import { Main } from './main';
-import { theme } from './theme';
+import { darktheme } from './theme';
 import './i18n';
 
 TimeAgo.addLocale(en);
@@ -60,8 +60,8 @@ export const App = memo(() => {
     );
 
     return (
-        <ChakraProvider theme={theme}>
-            <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+        <ChakraProvider theme={darktheme}>
+            <ColorModeScript initialColorMode={darktheme.config.initialColorMode} />
             <HotkeysProvider>
                 <ContextMenuProvider>
                     <AlertBoxProvider>

src/renderer/components/SettingsModal.tsx

@@ -121,6 +121,7 @@ interface DropdownProps<T> extends SettingsItemProps {
     value: T;
     options: readonly { label: string; value: T }[];
     onChange: (value: T) => void;
+    small?: boolean;
 }
 
 // eslint-disable-next-line prefer-arrow-functions/prefer-arrow-functions, react-memo/require-memo
@@ -131,6 +132,7 @@ function Dropdown<T>({
     value,
     options,
     onChange,
+    small,
 }: DropdownProps<T>) {
     const index = options.findIndex((o) => o.value === value);
 
@@ -149,7 +151,7 @@ function Dropdown<T>({
         >
             <Select
                 isDisabled={isDisabled}
-                minWidth="350px"
+                minWidth={small ? '171px' : '350px'}
                 value={index === -1 ? 0 : index}
                 onChange={(e) => {
                     const optionIndex = Number(e.target.value);
@@ -171,10 +173,10 @@ function Dropdown<T>({
 }
 
 const AppearanceSettings = memo(() => {
-    const { useSnapToGrid, useIsDarkMode, useAnimateChain, useViewportExportPadding } =
+    const { useSnapToGrid, useSelectTheme, useAnimateChain, useViewportExportPadding } =
         useContext(SettingsContext);
 
-    const [isDarkMode, setIsDarkMode] = useIsDarkMode;
+    const [isSelectTheme, setSelectTheme] = useSelectTheme;
     const [animateChain, setAnimateChain] = useAnimateChain;
     const [viewportExportPadding, setViewportExportPadding] = useViewportExportPadding;
 
@@ -185,13 +187,17 @@ const AppearanceSettings = memo(() => {
             divider={<StackDivider />}
             w="full"
         >
-            <Toggle
-                description="Use dark mode throughout chaiNNer."
-                title="Dark theme"
-                value={isDarkMode}
-                onToggle={() => {
-                    setIsDarkMode((prev) => !prev);
-                }}
+            <Dropdown
+                small
+                description="Choose the Theme for chaiNNers appereance."
+                options={[
+                    { label: 'Dark Mode', value: 'dark' },
+                    { label: 'Light Mode', value: 'light' },
+                    { label: 'System', value: 'system' },
+                ]}
+                title="Select Theme"
+                value={isSelectTheme}
+                onChange={setSelectTheme}
             />
 
             <Toggle

src/renderer/contexts/SettingsContext.tsx

@@ -26,7 +26,7 @@ interface Settings {
         setSnapToGridAmount: SetState<number>
     ];
     useStartupTemplate: GetSetState<string>;
-    useIsDarkMode: GetSetState<boolean>;
+    useSelectTheme: GetSetState<string>;
     useAnimateChain: GetSetState<boolean>;
     useExperimentalFeatures: GetSetState<boolean>;
     useEnableHardwareAcceleration: GetSetState<boolean>;
@@ -64,13 +64,13 @@ export const SettingsProvider = memo(({ children }: React.PropsWithChildren<unkn
     const useCheckUpdOnStrtUp = useMemoArray(useLocalStorage('check-upd-on-strtup-2', true));
     const useStartupTemplate = useMemoArray(useLocalStorage('startup-template', ''));
 
-    const useIsDarkMode = useMemoArray(useLocalStorage('use-dark-mode', true));
+    const useSelectTheme = useMemoArray(useLocalStorage('theme', 'dark'));
 
     const { setColorMode } = useColorMode();
-    const [isDarkMode] = useIsDarkMode;
+    const [selectThemeColor] = useSelectTheme;
     useEffect(() => {
-        setColorMode(isDarkMode ? 'dark' : 'light');
-    }, [setColorMode, isDarkMode]);
+        setColorMode(selectThemeColor);
+    }, [setColorMode, selectThemeColor]);
 
     const useAnimateChain = useMemoArray(useLocalStorage('animate-chain', true));
 
@@ -116,7 +116,7 @@ export const SettingsProvider = memo(({ children }: React.PropsWithChildren<unkn
         useSnapToGrid,
         useCheckUpdOnStrtUp,
         useStartupTemplate,
-        useIsDarkMode,
+        useSelectTheme,
         useAnimateChain,
         useExperimentalFeatures,
         useEnableHardwareAcceleration,

src/renderer/theme.ts

@@ -1,10 +1,30 @@
 import { Theme, extendTheme } from '@chakra-ui/react';
 
-const config = {
+// This is the initial theme config on startup
+const dark = {
     initialColorMode: 'dark',
     useSystemColorMode: false,
 } as const;
 
+// TODO: This should be used later after reading the theme settings.
+// When light, change the theme to this values before displaying the
+// window. Need to figure out where and when to load the new theme.
+// Currently this does nothing.
+const light = {
+    initialColorMode: 'light',
+    useSystemColorMode: false,
+} as const;
+
+// TODO: This should be used later to dynamically change the theme,
+// when the OS changes from dark to light or vice versa. Need to
+// figure out where and when to load the new theme. Currently this
+// does nothing.
+
+const system = {
+    initialColorMode: 'system',
+    useSystemColorMode: true,
+} as const;
+
 const grays = [50, 100, 200, 300, 400, 500, 600, 650, 700, 750, 800, 850, 900];
 const colors = {
     gray: Object.fromEntries(grays.map((v) => [v, `var(--gray-${v})`])),
@@ -16,4 +36,8 @@ const fonts = {
     monospace: `Roboto-Mono, monospace`,
 };
 
-export const theme = extendTheme({ config, colors, fonts } as const) as Theme;
+export const darktheme = extendTheme({ config: dark, colors, fonts } as const) as Theme;
+
+export const lighttheme = extendTheme({ config: light, colors, fonts } as const) as Theme;
+
+export const systemtheme = extendTheme({ config: system, colors, fonts } as const) as Theme;