fix: Adds ability to persist theming to local storage.

packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js

@@ -37,6 +37,9 @@ import { Footer } from '@patternfly/documentation-framework/components';
 
 export const RtlContext = createContext(false);
 
+const DARK_MODE_CLASS = 'pf-v6-theme-dark';
+const DARK_MODE_STORAGE_KEY = 'dark-mode';
+
 const HeaderTools = ({
   versions,
   hasVersionSwitcher,
@@ -72,7 +75,6 @@ const HeaderTools = ({
 
   const toggleDarkTheme = (_evt, selected) => {
     const darkThemeToggleClicked = !selected === isDarkTheme;
-    document.querySelector('html').classList.toggle('pf-v6-theme-dark', darkThemeToggleClicked);
     setIsDarkTheme(darkThemeToggleClicked);
   };
 
@@ -245,19 +247,60 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
 
   const [versions, setVersions] = useState({ ...staticVersions });
   const [isRTL, setIsRTL] = useState(false);
-  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
+
+  const mediaQuery = () => window.matchMedia('(prefers-color-scheme: dark)');
+  const getLocalStorageDarkMode = () => { 
+    if (localStorage !== undefined) {
+      return localStorage.getItem(DARK_MODE_STORAGE_KEY);
+    } else {
+      return null;
+    }
+  }
+  const setLocalStorageDarkMode = (isEnabled) => {
+    if (localStorage !== undefined) {
+      localStorage.setItem(DARK_MODE_STORAGE_KEY, isEnabled);
+      updateDarkMode();
+    }
+  }
+
+  const updateDarkMode = () => {
+    const isEnabled = getLocalStorageDarkMode() === null ? mediaQuery().matches : getLocalStorageDarkMode() === 'true';
+    const { classList } = document.documentElement;
+
+    if (isEnabled) {
+      classList.add(DARK_MODE_CLASS);
+    } else {
+      classList.remove(DARK_MODE_CLASS);
+    }
+  };
+
+  const [isDarkTheme, setIsDarkTheme] = React.useState(
+    getLocalStorageDarkMode() === null ? mediaQuery().matches : getLocalStorageDarkMode() === 'true'
+  );
+
+  const toggleDarkTheme = (darkThemeEnabled) => {
+    setLocalStorageDarkMode(darkThemeEnabled);
+    setIsDarkTheme(darkThemeEnabled);
+  };
 
   useEffect(() => {
+    updateDarkMode();
+
     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 +382,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
             isRTL={isRTL}
             setIsRTL={setIsRTL}
             isDarkTheme={isDarkTheme}
-            setIsDarkTheme={setIsDarkTheme}
+            setIsDarkTheme={toggleDarkTheme}
           />
         )}
       </MastheadContent>

packages/documentation-site/package.json

@@ -17,7 +17,7 @@
     "screenshots": "pf-docs-framework screenshots"
   },
   "dependencies": {
-    "@patternfly/documentation-framework": "6.0.6",
+    "@patternfly/documentation-framework": "6.0.8",
     "@patternfly/react-catalog-view-extension": "6.0.0",
     "@patternfly/react-console": "6.0.0",
     "@patternfly/react-docs": "7.0.0",