feat(ui): use custom dark mode localStorage key

invokeai/frontend/web/src/app/components/App.tsx

@@ -7,7 +7,7 @@ import useToastWatcher from 'features/system/hooks/useToastWatcher';
 
 import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
 import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
-import { Box, Flex, Grid, Portal, useColorMode } from '@chakra-ui/react';
+import { Box, Flex, Grid, Portal } from '@chakra-ui/react';
 import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import GalleryDrawer from 'features/gallery/components/ImageGalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
@@ -41,15 +41,12 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
   useGlobalHotkeys();
   const log = useLogger();
 
-  const currentTheme = useAppSelector((state) => state.ui.currentTheme);
-
   const isLightboxEnabled = useFeatureStatus('lightbox').isFeatureEnabled;
 
   const isApplicationReady = useIsApplicationReady();
 
   const [loadingOverridden, setLoadingOverridden] = useState(false);
 
-  const { setColorMode } = useColorMode();
   const dispatch = useAppDispatch();
 
   useEffect(() => {
@@ -57,10 +54,6 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
     dispatch(configChanged(config));
   }, [dispatch, config, log]);
 
-  useEffect(() => {
-    setColorMode(['light'].includes(currentTheme) ? 'light' : 'dark');
-  }, [setColorMode, currentTheme]);
-
   const handleOverrideClicked = useCallback(() => {
     setLoadingOverridden(true);
   }, []);

invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx

@@ -1,4 +1,8 @@
-import { ChakraProvider, extendTheme } from '@chakra-ui/react';
+import {
+  ChakraProvider,
+  createLocalStorageManager,
+  extendTheme,
+} from '@chakra-ui/react';
 import { ReactNode, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { theme as invokeAITheme } from 'theme/theme';
@@ -32,6 +36,8 @@ const THEMES = {
   ocean: oceanBlueColors,
 };
 
+const manager = createLocalStorageManager('@@invokeai-color-mode');
+
 function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
   const { i18n } = useTranslation();
 
@@ -51,7 +57,11 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
     document.body.dir = direction;
   }, [direction]);
 
-  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
+  return (
+    <ChakraProvider theme={theme} colorModeManager={manager}>
+      {children}
+    </ChakraProvider>
+  );
 }
 
 export default ThemeLocaleProvider;

invokeai/frontend/web/src/theme/theme.ts

@@ -23,6 +23,8 @@ import { textareaTheme } from './components/textarea';
 export const theme: ThemeOverride = {
   config: {
     cssVarPrefix: 'invokeai',
+    initialColorMode: 'dark',
+    useSystemColorMode: false,
   },
   styles: {
     global: (_props: StyleFunctionProps) => ({