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

feat(ui): use custom dark mode localStorage key

Browse Source
This commit is contained in:
psychedelicious 2023-05-12 17:43:14 +10:00
parent e4fb9cb33f
commit df5ba75c14
3 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
invokeai/frontend/web/src/app/components/App.tsx
View File

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

14
invokeai/frontend/web/src/app/components/ThemeLocaleProvider.tsx
View File

@ -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 { 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';
@ -32,6 +36,8 @@ const THEMES = {
ocean: oceanBlueColors, ocean: oceanBlueColors,
}; };
const manager = createLocalStorageManager('@@invokeai-color-mode');
function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) { function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
const { i18n } = useTranslation(); const { i18n } = useTranslation();
@ -51,7 +57,11 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
document.body.dir = direction; document.body.dir = direction;
}, [direction]); }, [direction]);
return <ChakraProvider theme={theme}>{children}</ChakraProvider>; return (
<ChakraProvider theme={theme} colorModeManager={manager}>
{children}
</ChakraProvider>
);
} }
export default ThemeLocaleProvider; export default ThemeLocaleProvider;

2
invokeai/frontend/web/src/theme/theme.ts
View File

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