@patternfly/documentation-framework 6.4.0 → 6.5.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.5.1 (2025-01-07)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+# 6.5.0 (2024-12-18)
+
+
+### Features
+
+* **dark theme:** revert localstorage/pref feature ([#4424](https://github.com/patternfly/patternfly-org/issues/4424)) ([0ffa269](https://github.com/patternfly/patternfly-org/commit/0ffa269a06d474a6a3069047e506ca83767d9e9c))
+
+
+
+
+
 # 6.4.0 (2024-12-17)
 
 

package/layouts/sideNavLayout/sideNavLayout.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, createContext, useCallback } from 'react';
+import React, { useEffect, useState, createContext } from 'react';
 import {
   Button,
   Page,
@@ -232,26 +232,6 @@ export function attachDocSearch(algolia, inputSelector, timeout) {
   }
 }
 
-const DARK_MODE_CLASS = 'pf-v6-theme-dark';
-const DARK_MODE_STORAGE_KEY = 'dark-mode';
-
-/**
- * Determines if dark mode is enabled based on the stored value or the system preference.
- * @returns {boolean} true if dark mode is enabled, false otherwise
- */
-function isDarkModeEnabled() {
-  // When running in prerender mode we can't access the browser APIs.
-  if (process.env.PRERENDER) {
-    return false;
-  }
-
-  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-  const storedValue = localStorage.getItem(DARK_MODE_STORAGE_KEY);
-  const isEnabled = storedValue === null ? mediaQuery.matches : storedValue === 'true';
-
-  return isEnabled;
-}
-
 export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp }) => {
   const algolia = process.env.algolia;
   const hasGdprBanner = process.env.hasGdprBanner;
@@ -265,63 +245,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
 
   const [versions, setVersions] = useState({ ...staticVersions });
   const [isRTL, setIsRTL] = useState(false);
-  const [isDarkTheme, setIsDarkThemeInternal] = useState(() => isDarkModeEnabled());
-
-  /**
-   * Stores the dark mode preference in local storage and updates the dark mode class.
-   */
-  const setIsDarkTheme = useCallback((value) => {
-    localStorage.setItem(DARK_MODE_STORAGE_KEY, value.toString());
-    updateDarkMode();
-  }, []);
-
-  /**
-   * Updates the dark mode class to the root element depending on whether dark mode is enabled.
-   */
-  const updateDarkMode = useCallback(() => {
-    const isEnabled = isDarkModeEnabled();
-    const root = document.documentElement;
-
-    if (isEnabled) {
-      root.classList.add(DARK_MODE_CLASS);
-    } else {
-      root.classList.remove(DARK_MODE_CLASS);
-    }
-
-    setIsDarkThemeInternal(isEnabled);
-  }, []);
-
-  useEffect(() => {
-    // When running in prerender mode we can't access the browser APIs.
-    if (process.env.PRERENDER) {
-      return;
-    }
-
-    // Update the dark mode when the the user changes their system/browser preference.
-    const onQueryChange = () => {
-      // Remove the stored value to defer to the system preference.
-      localStorage.removeItem(DARK_MODE_STORAGE_KEY);
-      updateDarkMode();
-    };
-
-    // Update the dark mode when the user changes the preference in another context (e.g. tab or window).
-    /** @type {(event: StorageEvent) => void} */
-    const onStorageChange = (event) => {
-      if (event.key === DARK_MODE_STORAGE_KEY) {
-        updateDarkMode();
-      }
-    };
-
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-    mediaQuery.addEventListener('change', onQueryChange);
-    window.addEventListener('storage', onStorageChange);
-
-    return () => {
-      mediaQuery.removeEventListener('change', onQueryChange);
-      window.removeEventListener('storage', onStorageChange);
-    };
-  }, []);
+  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
 
   useEffect(() => {
     if (typeof window === 'undefined') {

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.4.0",
+  "version": "6.5.1",
   "author": "Red Hat",
   "license": "MIT",
-  "private": false,
   "bin": {
     "pf-docs-framework": "scripts/cli/cli.js"
   },
@@ -13,7 +12,7 @@
     "@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.140",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.142",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
     "babel-loader": "^9.1.3",
@@ -80,5 +79,5 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "01b545912f80ac1dc95586cb237ebb1397f5d509"
+  "gitHead": "df4d155dae72f533061fb62850ecd60502a718ed"
 }

package/templates/html.ejs

@@ -13,41 +13,6 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#151515">
     <meta name="application-name" content="PatternFly docs">
-    <script>
-      (() => {
-        "use strict";
-
-        const DARK_MODE_CLASS = "pf-v6-theme-dark";
-        const DARK_MODE_STORAGE_KEY = "dark-mode";
-        const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
-        
-        // Ensure that the dark mode is correctly set before the page starts rendering.
-        updateDarkMode();
-
-        /**
-         * Applies the dark mode class to the root element if dark mode is enabled.
-         */
-        function updateDarkMode() {
-          const isEnabled = isDarkModeEnabled();
-          const root = document.documentElement;
-        
-          if (isEnabled) {
-            root.classList.add(DARK_MODE_CLASS);
-          }
-        }
-
-        /**
-         * Determines if dark mode is enabled based on the stored value or the system preference.
-         * @returns {boolean} true if dark mode is enabled, false otherwise
-         */
-        function isDarkModeEnabled() {
-          const storedValue = localStorage.getItem(DARK_MODE_STORAGE_KEY);
-          const isEnabled = storedValue === null ? darkModeQuery.matches : storedValue === "true";
-
-          return isEnabled;
-        }
-      })();
-    </script>
     <%= htmlWebpackPlugin.tags.headTags %>
   </head>
   <body>