fix: Adds ability to persist theming to local storage.

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,38 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
   const [isRTL, setIsRTL] = useState(false);
   const [isDarkTheme, setIsDarkTheme] = React.useState(false);
 
+  const enableDarkTheme = (darkThemeEnabled) => {
+    document.querySelector('html').classList.toggle('pf-v6-theme-dark', darkThemeEnabled);
+    localStorage.setItem('dark-theme', darkThemeEnabled);
+    setIsDarkTheme(darkThemeEnabled);
+  }
+
   useEffect(() => {
+    const darkTheme = localStorage.getItem('dark-theme');
+    if (darkTheme === null) {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      enableDarkTheme(mediaQuery.matches);
+    } else {
+      enableDarkTheme(localStorage.getItem('dark-theme') === 'true');
+    }
+
+    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 +359,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
             isRTL={isRTL}
             setIsRTL={setIsRTL}
             isDarkTheme={isDarkTheme}
-            setIsDarkTheme={setIsDarkTheme}
+            setIsDarkTheme={enableDarkTheme}
           />
         )}
       </MastheadContent>

yarn.lock

@@ -1787,6 +1787,74 @@
     "@patternfly/react-core" "6.0.0-alpha.94"
     commander "^12.0.0"
 
+"@patternfly/[email protected]":
+  version "6.0.6"
+  resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.0.6.tgz#27842a4403201e990150ebf4e261cc8eb79c42be"
+  integrity sha512-YXXzj7K2lmAZbvgTDSTd4AJTW6xpJ6G/C3jCMxGGMXevYJ1wGHQQnBVbGQvQcZPgIwU5nv3+FmnyfldJhRwQtw==
+  dependencies:
+    "@babel/core" "^7.24.3"
+    "@babel/preset-env" "^7.24.3"
+    "@babel/preset-react" "^7.24.1"
+    "@mdx-js/util" "1.6.16"
+    "@patternfly/ast-helpers" "^1.4.0-alpha.122"
+    "@reach/router" "npm:@gatsbyjs/[email protected]"
+    autoprefixer "9.8.6"
+    babel-loader "^9.1.3"
+    camelcase-css "2.0.1"
+    chokidar "4.0.0"
+    clean-webpack-plugin "4.0.0"
+    codesandbox "2.2.0"
+    commander "4.1.1"
+    copy-webpack-plugin "11.0.0"
+    css-loader "6.7.3"
+    detab "2.0.3"
+    express "4.21.0"
+    file-loader "6.2.0"
+    file-saver "1.3.8"
+    fs-extra "9.0.1"
+    glob "9.0.0"
+    handlebars "4.7.7"
+    hast-to-hyperscript "9.0.0"
+    hast-util-to-text "2.0.0"
+    html-formatter "0.1.9"
+    html-webpack-plugin "5.5.0"
+    js-yaml "3.14.0"
+    mdast-util-to-hast "9.1.1"
+    mdurl "1.0.1"
+    mini-css-extract-plugin "2.7.5"
+    null-loader "4.0.1"
+    parse-entities "2.0.0"
+    path-browserify "1.0.1"
+    postcss "8.4.32"
+    postcss-loader "7.1.0"
+    process "^0.11.10"
+    puppeteer "19.11.1"
+    puppeteer-cluster "0.23.0"
+    react-docgen "5.3.1"
+    react-ssr-prepass "1.5.0"
+    remark-footnotes "1.0.0"
+    remark-frontmatter "2.0.0"
+    remark-mdx "2.0.0-next.8"
+    remark-mdxjs "2.0.0-next.8"
+    remark-parse "8.0.3"
+    remark-squeeze-paragraphs "4.0.0"
+    responsive-loader "3.1.2"
+    sharp "0.32.6"
+    style-to-object "0.3.0"
+    to-vfile "6.1.0"
+    typedoc "0.23.0"
+    typescript "4.7.4"
+    unified "9.1.0"
+    unist-util-remove "2.0.0"
+    unist-util-visit "2.0.3"
+    url-loader "4.1.0"
+    vfile-reporter "6.0.1"
+    webpack "5.76.3"
+    webpack-bundle-analyzer "4.8.0"
+    webpack-cli "5.0.1"
+    webpack-dev-server "4.13.1"
+    webpack-merge "5.8.0"
+
 "@patternfly/[email protected]":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@patternfly/patternfly-a11y/-/patternfly-a11y-5.0.0.tgz#e8c5982eb99a12529a994e80d2c5591d8f198036"