Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): add color mode watcher

Browse Source
This commit is contained in:
psychedelicious 2023-03-12 16:38:50 +11:00
parent f4b7f80d59
commit bbb95dbc5b
3 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/web/src/app/App.tsx
View File

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

3
invokeai/frontend/web/src/app/ThemeLocaleProvider.tsx
View File

@ -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 { ReactNode, useEffect } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { theme as invokeAITheme } from 'theme/theme'; import { theme as invokeAITheme } from 'theme/theme';
@ -42,7 +42,6 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
const theme = extendTheme({ const theme = extendTheme({
...invokeAITheme, ...invokeAITheme,
colors: THEMES[currentTheme as keyof typeof THEMES], colors: THEMES[currentTheme as keyof typeof THEMES],
initialColorMode: ['light'].includes(currentTheme) ? 'light' : 'dark',
direction, direction,
}); });

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

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