From 66895c7fb2712e198e14dce9bb0d0885cf68a74b Mon Sep 17 00:00:00 2001
From: Donald Labaj <donald.labaj@gmail.com>
Date: Thu, 31 Oct 2024 16:14:02 -0400
Subject: [PATCH] fix: Adds ability to persist theming to local storage.

---
 .../layouts/sideNavLayout/sideNavLayout.js     | 18 ++++++++++++++++--
 packages/documentation-site/package.json       |  2 +-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
index de89641546..1a820b8123 100644
--- 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,10 +246,21 @@ 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) {
@@ -258,6 +268,10 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
         }
       });
     }
+
+    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
index 24aee02085..a5d1eb373e 100644
--- 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",