@patternfly/documentation-framework 6.0.10 → 6.0.12

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.12 (2024-11-22)
+
+
+### Bug Fixes
+
+* improve handling of dark mode preferences ([#4389](https://github.com/patternfly/patternfly-org/issues/4389)) ([1580900](https://github.com/patternfly/patternfly-org/commit/1580900ab1e27bdc3373d91e97c521da30878ac5)), closes [#4365](https://github.com/patternfly/patternfly-org/issues/4365)
+
+
+
+
+
+## 6.0.11 (2024-11-22)
+
+
+### Reverts
+
+* Revert "chore: upgrade Yarn to the latest version (#4387)" (#4391) ([14a81bf](https://github.com/patternfly/patternfly-org/commit/14a81bf15e81a7faa8ebea4c44e4fca2c6fae964)), closes [#4387](https://github.com/patternfly/patternfly-org/issues/4387) [#4391](https://github.com/patternfly/patternfly-org/issues/4391)
+
+
+
+
+
 ## 6.0.10 (2024-11-21)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/layouts/sideNavLayout/sideNavLayout.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, createContext } from 'react';
+import React, { useEffect, useState, createContext, useCallback } from 'react';
 import {
   Button,
   Page,
@@ -232,6 +232,26 @@ 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;
@@ -245,7 +265,63 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
 
   const [versions, setVersions] = useState({ ...staticVersions });
   const [isRTL, setIsRTL] = useState(false);
-  const [isDarkTheme, setIsDarkTheme] = React.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);
+    };
+  }, []);
 
   useEffect(() => {
     if (typeof window === 'undefined') {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.0.10",
+  "version": "6.0.12",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -13,7 +13,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.126",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.128",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
     "babel-loader": "^9.1.3",
@@ -80,5 +80,5 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "3d437f9ad6d0307fdab5e76995bd395c9aeed10e"
+  "gitHead": "f66211d8649d3f8e308ed1b2cb31f519206f9233"
 }

package/templates/html.ejs

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
+    <meta name="color-scheme" content="light dark">
     <meta name="description" content="PatternFly is Red Hat's open source design system. It consists of components, documentation, and code for building enterprise applications at scale.">
     <title><%= title %></title>
     <link rel="shortcut icon" href="/assets/Favicon-Light.png">
@@ -13,6 +14,41 @@
     <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>