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 initial theme setting

Browse Source
This commit is contained in:
Kaspar Emanuel 2022-12-15 18:41:10 +00:00 committed by blessedcoolant
parent 6e0f3475b4
commit 0b10835269
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/features/system/components/ThemeChanger.tsx
View File

@ -1,3 +1,4 @@
import { useEffect } from 'react';
import { useColorMode, VStack } from '@chakra-ui/react'; import { useColorMode, VStack } from '@chakra-ui/react';
import { RootState } from 'app/store'; import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/storeHooks';
@ -10,14 +11,21 @@ import IAIButton from 'common/components/IAIButton';
const THEMES = ['dark', 'light', 'green']; const THEMES = ['dark', 'light', 'green'];
export default function ThemeChanger() { export default function ThemeChanger() {
const { setColorMode } = useColorMode(); const { setColorMode, colorMode } = useColorMode();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const currentTheme = useAppSelector( const currentTheme = useAppSelector(
(state: RootState) => state.options.currentTheme (state: RootState) => state.options.currentTheme
); );
useEffect(() => {
// syncs the redux store theme to the chakra's theme on startup and when
// setCurrentTheme is dispatched
if (colorMode !== currentTheme) {
setColorMode(currentTheme);
}
}, [colorMode, currentTheme]);
const handleChangeTheme = (theme: string) => { const handleChangeTheme = (theme: string) => {
setColorMode(theme);
dispatch(setCurrentTheme(theme)); dispatch(setCurrentTheme(theme));
}; };