From 0b1083526935346f50017c7a34ccad7c702f555f Mon Sep 17 00:00:00 2001
From: Kaspar Emanuel <kaspar@kitspace.org>
Date: Thu, 15 Dec 2022 18:41:10 +0000
Subject: [PATCH] Fix initial theme setting

---
 .../src/features/system/components/ThemeChanger.tsx  | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/system/components/ThemeChanger.tsx b/frontend/src/features/system/components/ThemeChanger.tsx
index f2b1255391..33f52b2d97 100644
--- a/frontend/src/features/system/components/ThemeChanger.tsx
+++ b/frontend/src/features/system/components/ThemeChanger.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useColorMode, VStack } from '@chakra-ui/react';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
@@ -10,14 +11,21 @@ import IAIButton from 'common/components/IAIButton';
 const THEMES = ['dark', 'light', 'green'];
 
 export default function ThemeChanger() {
-  const { setColorMode } = useColorMode();
+  const { setColorMode, colorMode } = useColorMode();
   const dispatch = useAppDispatch();
   const currentTheme = useAppSelector(
     (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) => {
-    setColorMode(theme);
     dispatch(setCurrentTheme(theme));
   };