Update behavior of themee

congmul · Jul 14, 2024 · 0a380eb · 0a380eb
1 parent 4654bb2
commit 0a380eb
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -49,7 +49,7 @@ function App() {
   }, [leftMenuCollapse])
   return (
     <>
-      <Header setCurrentTheme={setCurrentTheme} />
+      <Header currentTheme={currentTheme} setCurrentTheme={setCurrentTheme} />
       <div className="app-wrapper">
         <LeftMenu setContent={setContent} leftMenuCollapse={leftMenuCollapse} setLeftMenuCollapse={setLeftMenuCollapse} />
         <div className="editor-page-wrapper" ref={rightMenuRef}>

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -5,24 +5,25 @@ import { Theme } from "../../utils/theme.cont";
 import TooltipComponent from "../Tooltip/Tooltip";
 
 interface HeaderType {
+    currentTheme: string
     setCurrentTheme: React.Dispatch<string>
 }
-const Header:React.FC<HeaderType> = ({setCurrentTheme}) => {
-    const [ themeState, setThemeState ] = useLocalStorageState('theme');
+const Header:React.FC<HeaderType> = ({currentTheme, setCurrentTheme}) => {
+    const [ _, setThemeState ] = useLocalStorageState('theme');
     return(
         <header>
             <div className="header-wrapper">
                 <div><BsCodeSquare /> OpenAPI Specification Editor</div>
                 <div>
-                    {themeState === Theme.LIGHT 
+                    {currentTheme === Theme.LIGHT
                         ? 
                             <TooltipComponent message="Dark theme" onClick={() => {setThemeState(Theme.DARK); setCurrentTheme(Theme.DARK);}}>
                                 <LightModeSVG /> 
-                            </TooltipComponent>
-                        : 
+                            </TooltipComponent>   
+                        :    
                             <TooltipComponent message="Light theme" onClick={() => {setThemeState(Theme.LIGHT); setCurrentTheme(Theme.LIGHT);}}>
                                 <DarkModeSVG /> 
-                            </TooltipComponent>
+                            </TooltipComponent>                         
                     }
                 </div>
             </div>