rebased

patternfly · Nov 25, 2024 · 8d92650 · 8d92650
2 parents 2f0015b + f66211d
commit 8d92650
Show file tree

Hide file tree

Showing 8 changed files with 227 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -30,9 +30,9 @@
     ]
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.1.0-prerelease.2",
+    "@patternfly/patternfly": "^6.1.0-prerelease.2",
     "@patternfly/react-code-editor": "^6.0.0",
-    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-core": "^6.1.0-prerelease.2",
     "@patternfly/react-table": "^6.0.0",
     "@octokit/rest": "^19.0.7",
     "glob": "^8.1.0",

diff --git a/packages/ast-helpers/CHANGELOG.md b/packages/ast-helpers/CHANGELOG.md
@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.4.0-alpha.128 (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)
+
+
+
+
+
+# 1.4.0-alpha.127 (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)
+
+
+
+
+
+# 1.4.0-alpha.126 (2024-11-21)
+
+**Note:** Version bump only for package @patternfly/ast-helpers
+
+
+
+
+
 # 1.4.0-alpha.125 (2024-11-20)
 
 **Note:** Version bump only for package @patternfly/ast-helpers

diff --git a/packages/ast-helpers/package.json b/packages/ast-helpers/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/ast-helpers",
   "description": "Acorn AST helpers for working with live code",
-  "version": "1.4.0-alpha.125",
+  "version": "1.4.0-alpha.128",
   "author": "Red Hat",
   "license": "MIT",
   "publishConfig": {

diff --git a/packages/documentation-framework/CHANGELOG.md b/packages/documentation-framework/CHANGELOG.md
@@ -3,6 +3,36 @@
 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
+
+
+
+
+
 ## 6.0.9 (2024-11-20)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js b/packages/documentation-framework/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') {

diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.0.9",
+  "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.125",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.128",
     "@reach/router": "npm:@gatsbyjs/[email protected]",
     "autoprefixer": "9.8.6",
     "babel-loader": "^9.1.3",
@@ -73,9 +73,9 @@
     "webpack-merge": "5.8.0"
   },
   "peerDependencies": {
-    "@patternfly/patternfly": "6.1.0-prerelease.2",
+    "@patternfly/patternfly": "^6.1.0-prerelease.2",
     "@patternfly/react-code-editor": "^6.0.0",
-    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-core": "^6.1.0-prerelease.2",
     "@patternfly/react-table": "^6.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"

diff --git a/packages/documentation-framework/templates/html.ejs b/packages/documentation-framework/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>

diff --git a/yarn.lock b/yarn.lock
@@ -1801,10 +1801,15 @@
     puppeteer-cluster "^0.24.0"
     xmldoc "^1.3.0"
 
-"@patternfly/[email protected]":
-  version "6.1.0-prerelease.2"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.1.0-prerelease.2.tgz#5beb864087ba17a3ea9f4c3dbd14dc831bbd2fa9"
-  integrity sha512-zl0+3CH8A67iOEyitIEaNE6R1I4YXVqTRwHz8JJJEZcgfrqPN8Tst/Gz9N4hg/PBqGxBtj0lEJzP3s86rWm7kA==
+"@patternfly/[email protected]":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0.tgz#c7c78db38ef1af6324cf742c282404cd71696d1e"
+  integrity sha512-Mn92Tt/4okSj1COGCJrgUgh390OOaFCWf0tL0WmigDNUecSHNn1D6Vhpd1hxHQBXvre9eWorzxV2b9yhSEl79Q==
+
+"@patternfly/patternfly@^6.1.0-prerelease.2":
+  version "6.1.0-prerelease.4"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.1.0-prerelease.4.tgz#e56f92cad67e7f770f5cb1a89d71488f286e94cb"
+  integrity sha512-8Po0UI833LWA2Xbc48xFv+DOcfQm8eFjEUrK+topHjRiDJ20qGdn++K6S9XfciLweAkKPBqZzN0skc3+Xk8t1Q==
 
 "@patternfly/[email protected]":
   version "6.0.0"
@@ -1918,10 +1923,22 @@
     react-dropzone "^14.2.3"
     tslib "^2.7.0"
 
-"@patternfly/react-core@^6.1.0-prerelease.4":
-  version "6.1.0-prerelease.4"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.1.0-prerelease.4.tgz#f6389df9731daafd5c623667190a7af0e378d44a"
-  integrity sha512-RPQB4xPnzQmDLhuWFoiGujndhCbbX7EYw/t0eglWg1LseV6q2Vv3O1AoM94VxR0HQ4df9H9uZtZTYnRU+hvI+g==
+"@patternfly/react-core@^6.1.0-prerelease.2":
+  version "6.1.0-prerelease.6"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.1.0-prerelease.6.tgz#2854fddc1344f07118243cb281aeba8bb3518aa5"
+  integrity sha512-6/9uTIAqIUSEcHADvDRbdFFZgltCADOMS9nGeKCO2dW+/ZdlJ5SE3zvveNtYHVuREBfwSsyEQraBIKYDhU5WSA==
+  dependencies:
+    "@patternfly/react-icons" "^6.1.0-prerelease.3"
+    "@patternfly/react-styles" "^6.1.0-prerelease.2"
+    "@patternfly/react-tokens" "^6.1.0-prerelease.2"
+    focus-trap "7.6.2"
+    react-dropzone "^14.2.3"
+    tslib "^2.8.1"
+
+"@patternfly/[email protected]":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-docs/-/react-docs-7.0.0.tgz#1a6eb8b95606193b97f9c71ca8ecf01f7dbbd53d"
+  integrity sha512-OGFDoGh5JBWtw7zcC93/yfsq54oa/NfUUSqpLIu/6bN5/WXZ7OuaVoTk8jLG8AgcvvwqNsK5/MPgY95gJk3lQA==
   dependencies:
     "@patternfly/react-icons" "^6.1.0-prerelease.1"
     "@patternfly/react-styles" "^6.1.0-prerelease.1"
@@ -1975,10 +1992,10 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.0.0-prerelease.7.tgz#44218ac52e5a8440bd0bb96eceef3df4c9239b86"
   integrity sha512-DQmecVgXRIiD3ww4KUuJ0qO76TmYMDEJ1ao1+DYuTSP+FzeJLJKuE9QxvL8qn3anyKtuORBuHdTIjM52mVq5Vg==
 
-"@patternfly/react-icons@^6.1.0-prerelease.1":
-  version "6.1.0-prerelease.1"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.1.0-prerelease.1.tgz#32e8de12584b9adab980848a2c42c1546a7ec886"
-  integrity sha512-Opd2kMRxKLkNAlFnEvfkt+Qsxfa3JQIo6s3L20fAQaiQEoNjaoSTdHqO/0KhJLXVEVKjAfjKlloPFyGe+0bVCQ==
+"@patternfly/react-icons@^6.1.0-prerelease.3":
+  version "6.1.0-prerelease.3"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.1.0-prerelease.3.tgz#94104e015b56c3d0451ebf0ac0cf9bb3fd79a33d"
+  integrity sha512-RSVtwGwi85vyLqCpvMkXlook1Gm/Q5lynw4Ufk8EPWxD1hE6/GzZi26cadbYDgqVtiMgt71L1E1gFGbuYEwD3g==
 
 "@patternfly/[email protected]":
   version "6.0.0"
@@ -2005,10 +2022,10 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.0.0-prerelease.6.tgz#e46acc02c8bc2464846544ebf55bbc4a646824b9"
   integrity sha512-tI28gIJFgbgVQs7Xj705csfl6T92dr5Bh7ynR5gN4+QdTWCUWmSctp46G2ZewXdrIN+C+2zUPE86o77aFp4CWw==
 
-"@patternfly/react-styles@^6.1.0-prerelease.1":
-  version "6.1.0-prerelease.1"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.1.0-prerelease.1.tgz#2ca05c08ada8c6211ba188c21962ac827492cb9d"
-  integrity sha512-iJu5aPm3+AsMz0P7to0taYCERVN+Wx/D422JF7rg/fH+g/9zgzPdU8rT/w20nPoHT8aOsmyB7sfo64gyfapSiQ==
+"@patternfly/react-styles@^6.1.0-prerelease.2":
+  version "6.1.0-prerelease.2"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.1.0-prerelease.2.tgz#32a1daed06f48eef4bfa15aa0bbf4a5d9a3b6647"
+  integrity sha512-kX+kVNBzbLF22miTwY2egSQ4M5nez+2jN6RLLrSToBmJc1Ani4zUOgdh4xk2wtGgWqvFRJ4O2N2ThbQyaBF7CA==
 
 "@patternfly/react-table@^6.0.0":
   version "6.0.0"
@@ -2060,10 +2077,10 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.0.0-prerelease.7.tgz#68525ffcf08aebe2436d77af168a5fb4b3478b17"
   integrity sha512-SLgVwbIgVx26LCjaXkpNlPIZYqWpHJkw3QX/n3URLmIcRlCw536/rKO1PzXaeuCCqhuSq66J6R125zM2eJjM6A==
 
-"@patternfly/react-tokens@^6.1.0-prerelease.1":
-  version "6.1.0-prerelease.1"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.1.0-prerelease.1.tgz#88c5d835b74117933ba2c04a85115bda51cec2b7"
-  integrity sha512-d7XXo3/1tK86FxbAnMvKWnMuxQdTot+le8+hS0Jd6MIEqrVL2nJ3/hvcwAigN6M7LTsL5GrZ9NTaduuF3Xfd7Q==
+"@patternfly/react-tokens@^6.1.0-prerelease.2":
+  version "6.1.0-prerelease.2"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.1.0-prerelease.2.tgz#ea3444870d29f516acc227c64635508731215004"
+  integrity sha512-cxZ8pzMdh7xaad1gXguHVc4EUbtUeH61ardVMwhQzJS3ixLhAv8JHDUlxHq/RpDApa/RWKk44rBwOK2TRaTzVQ==
 
 "@patternfly/[email protected]":
   version "6.0.1"
@@ -6066,10 +6083,10 @@ [email protected]:
   dependencies:
     tabbable "^6.2.0"
 
-[email protected].1:
-  version "7.6.1"
-  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.6.1.tgz#cdbcc7973fe135b2c739eabfebfa442351747361"
-  integrity sha512-nB8y4nQl8PshahLpGKZOq1sb0xrMVFSn6at7u/qOsBZTlZRzaapISGENcB6mOkoezbClZyiMwEF/dGY8AZ00rA==
+[email protected].2:
+  version "7.6.2"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.6.2.tgz#a501988821ca23d0150a7229eb7a20a3695bdf0e"
+  integrity sha512-9FhUxK1hVju2+AiQIDJ5Dd//9R2n2RAfJ0qfhF4IHGHgcoEUTMpbTeG/zbEuwaiYXfuAH6XE0/aCyxDdRM+W5w==
   dependencies:
     tabbable "^6.2.0"
 
@@ -12984,6 +13001,11 @@ tslib@^2.7.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
   integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
 
+tslib@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 tuf-js@^1.1.7:
   version "1.1.7"
   resolved "https://registry.npmjs.org/tuf-js/-/tuf-js-1.1.7.tgz#21b7ae92a9373015be77dfe0cb282a80ec3bbe43"