fix: Adds ability to persist theming to local storage.

patternfly · Oct 31, 2024 · 66895c7 · 66895c7
1 parent 1c63cc8
commit 66895c7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
@@ -72,7 +72,6 @@ const HeaderTools = ({
 
   const toggleDarkTheme = (_evt, selected) => {
     const darkThemeToggleClicked = !selected === isDarkTheme;
-    document.querySelector('html').classList.toggle('pf-v6-theme-dark', darkThemeToggleClicked);
     setIsDarkTheme(darkThemeToggleClicked);
   };
 
@@ -247,17 +246,32 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
   const [isRTL, setIsRTL] = useState(false);
   const [isDarkTheme, setIsDarkTheme] = React.useState(false);
 
+  const handleThemeChange = (darkThemeEnabled) => {
+    document.querySelector('html').classList.toggle('pf-v6-theme-dark', darkThemeEnabled);
+    localStorage.setItem('dark-theme', darkThemeEnabled);
+    setIsDarkTheme(darkThemeEnabled);
+  }
+
   useEffect(() => {
+    localStorage ? handleThemeChange(localStorage.getItem('dark-theme') === 'true') : handleThemeChange(false);
+
+    document.addEventListener('visibilitychange', () => handleThemeChange(localStorage.getItem('dark-theme') === 'true'));
+
     if (typeof window === 'undefined') {
       return;
     }
+
     if (hasVersionSwitcher && window.fetch) {
       fetch('/versions.json').then((res) => {
         if (res.ok) {
           res.json().then((json) => setVersions(json));
         }
       });
     }
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    }
   }, []);
 
   const SideBar = (
@@ -339,7 +353,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
             isRTL={isRTL}
             setIsRTL={setIsRTL}
             isDarkTheme={isDarkTheme}
-            setIsDarkTheme={setIsDarkTheme}
+            setIsDarkTheme={handleThemeChange}
           />
         )}
       </MastheadContent>

diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json
@@ -17,7 +17,7 @@
     "screenshots": "pf-docs-framework screenshots"
   },
   "dependencies": {
-    "@patternfly/documentation-framework": "6.0.1",
+    "@patternfly/documentation-framework": "6.0.5",
     "@patternfly/react-catalog-view-extension": "6.0.0",
     "@patternfly/react-console": "6.0.0",
     "@patternfly/react-docs": "7.0.0",