fix(ui): add color mode watcher

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

@@ -9,15 +9,25 @@ 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 } from '@chakra-ui/react';
+import { Box, Flex, Grid, Portal, useColorMode } from '@chakra-ui/react';
 import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
+import Lightbox from 'features/lightbox/components/Lightbox';
+import { useAppSelector } from './storeHooks';
+import { useEffect } from 'react';
 
 keepGUIAlive();
 
 const App = () => {
   useToastWatcher();
 
+  const currentTheme = useAppSelector((state) => state.ui.currentTheme);
+  const { setColorMode } = useColorMode();
+
+  useEffect(() => {
+    setColorMode(['light'].includes(currentTheme) ? 'light' : 'dark');
+  }, [setColorMode, currentTheme]);
+
   return (
     <Grid w="100vw" h="100vh">
       <ImageUploader>
@@ -45,6 +55,7 @@ const App = () => {
       <Portal>
         <FloatingGalleryButton />
       </Portal>
+      <Lightbox />
     </Grid>
   );
 };

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

@@ -1,4 +1,4 @@
-import { ChakraProvider, extendTheme } from '@chakra-ui/react';
+import { ChakraProvider, extendTheme, useColorMode } from '@chakra-ui/react';
 import { ReactNode, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { theme as invokeAITheme } from 'theme/theme';
@@ -42,7 +42,6 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
   const theme = extendTheme({
     ...invokeAITheme,
     colors: THEMES[currentTheme as keyof typeof THEMES],
-    initialColorMode: ['light'].includes(currentTheme) ? 'light' : 'dark',
     direction,
   });
 

invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx

@@ -181,9 +181,11 @@ const ImageMetadataViewer = memo(
           overflow: 'scroll',
           maxHeight: APP_METADATA_HEIGHT,
           height: '100%',
-          zIndex: '10',
           backdropFilter: 'blur(10px)',
-          bg: 'blackAlpha.600',
+          bg: 'whiteAlpha.600',
+          _dark: {
+            bg: 'blackAlpha.600',
+          },
         }}
       >
         <Flex gap={1} direction="column" width="100%">
@@ -449,7 +451,8 @@ const ImageMetadataViewer = memo(
                     borderRadius: 'base',
                     overflowX: 'scroll',
                     wordBreak: 'break-all',
-                    bg: 'whiteAlpha.100',
+                    bg: 'whiteAlpha.200',
+                    _dark: { bg: 'blackAlpha.200' },
                   }}
                 >
                   <pre>{metadataJSON}</pre>