fix: fix dark theme toggle

Azure-Samples · Dec 6, 2023 · d581f8a · d581f8a
1 parent 5bade00
commit d581f8a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/packages/webapp/src/components/SettingsStyles/SettingsStyles.tsx b/packages/webapp/src/components/SettingsStyles/SettingsStyles.tsx
@@ -15,10 +15,9 @@ export type CustomStylesState = {
 
 interface Props {
   onChange: (newStyles: CustomStylesState) => void;
-  isDarkTheme: boolean;
 }
 
-export const SettingsStyles = ({ onChange, isDarkTheme }: Props) => {
+export const SettingsStyles = ({ onChange }: Props) => {
   // this needs to come from an API call to some config persisted in the DB
   const styleDefaultsLight = {
     AccentHighDefault: '#692b61',
@@ -47,8 +46,9 @@ export const SettingsStyles = ({ onChange, isDarkTheme }: Props) => {
   };
 
   const getInitialStyles = (): CustomStylesState => {
-    const styleDefaults = isDarkTheme ? styleDefaultsDark : styleDefaultsLight;
     const storedStyles = localStorage.getItem('customStyles');
+    const themeStore = localStorage.getItem('isDarkTheme');
+    const styleDefaults = themeStore === 'true' ? styleDefaultsDark : styleDefaultsLight;
     if (storedStyles === '') {
       localStorage.setItem('customStyles', JSON.stringify(styleDefaults));
     }

diff --git a/packages/webapp/src/components/ThemeSwitch/ThemeSwitch.tsx b/packages/webapp/src/components/ThemeSwitch/ThemeSwitch.tsx
@@ -18,7 +18,8 @@ export const ThemeSwitch: React.FC<ThemeSwitchProps> = ({ onToggle, isDarkTheme,
     // Toggle 'dark' class on the shell app body element based on the isDarkTheme prop and isConfigPanelOpen
     document.body.classList.toggle('dark', isDarkTheme);
     document.documentElement.dataset.theme = isDarkTheme && isConfigPanelOpen ? 'dark' : '';
-  }, []);
+    localStorage.removeItem('isDarkTheme');
+  }, [isDarkTheme, isConfigPanelOpen]);
 
   return (
     <>

diff --git a/packages/webapp/src/pages/chat/Chat.tsx b/packages/webapp/src/pages/chat/Chat.tsx
@@ -315,7 +315,7 @@ const Chat = () => {
           {isChatStylesAccordionOpen && (
             <>
               <TooltipHost calloutProps={toolTipTextCalloutProps} content={toolTipText.promptTemplate}>
-                <SettingsStyles onChange={handleCustomStylesChange} isDarkTheme={isDarkTheme}></SettingsStyles>
+                <SettingsStyles onChange={handleCustomStylesChange}></SettingsStyles>
               </TooltipHost>
             </>
           )}