@patternfly/documentation-framework 6.28.0 → 6.28.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.28.1 (2025-10-13)
+
+
+### Bug Fixes
+
+* **docs-framework:** remove useTheme from footer to fix theme state bug ([#4817](https://github.com/patternfly/patternfly-org/issues/4817)) ([44c02a0](https://github.com/patternfly/patternfly-org/commit/44c02a07c8ba3443429d4fa8afa5bf0014a36e27))
+
+
+
+
+
 # 6.28.0 (2025-10-13)
 
 

package/components/themeSelector/themeSelector.js

@@ -11,6 +11,7 @@ import {
   ToggleGroupItem,
   Icon,
   Divider,
+  Spinner,
   Label,
   Popover,
   Button
@@ -125,8 +126,10 @@ export const ThemeSelector = ({ id }) => {
         return SunIcon;
       case colorModes.DARK:
         return MoonIcon;
-      default:
+      case colorModes.SYSTEM:
         return DesktopIcon;
+      default:
+        return <Spinner size="sm" />;
     }
   };
 
@@ -148,7 +151,7 @@ export const ThemeSelector = ({ id }) => {
       )}
       shouldFocusToggleOnSelect
       onOpenChangeKeys={['Escape']}
-      popperProps={{ 
+      popperProps={{
         position: 'right',
         enableFlip: true,
         preventOverflow: true
@@ -167,35 +170,36 @@ export const ThemeSelector = ({ id }) => {
           </SelectOption>
         </SelectList>
       </SelectGroup>
-      {process.env.hasHighContrastSwitcher && (<>
-      <Divider />
-      <SelectGroup label={HighContrastGroupLabel}>
-        <MenuSearch>
-          <MenuSearchInput>
-            <ToggleGroup aria-label="High contrast theme switcher">
-              <ToggleGroupItem
-                text="System"
-                buttonId={highContrastModes.SYSTEM}
-                isSelected={highContrastMode === highContrastModes.SYSTEM}
-                onChange={handleHighContrastThemeSelection}
-              />
-              <ToggleGroupItem
-                text="On"
-                buttonId={highContrastModes.ON}
-                isSelected={highContrastMode === highContrastModes.ON}
-                onChange={handleHighContrastThemeSelection}
-              />
-              <ToggleGroupItem
-                text="Off"
-                buttonId={highContrastModes.OFF}
-                isSelected={highContrastMode === highContrastModes.OFF}
-                onChange={handleHighContrastThemeSelection}
-              />
-            </ToggleGroup>
-          </MenuSearchInput>
-        </MenuSearch>
-      </SelectGroup>
-      </>
+      {process.env.hasHighContrastSwitcher && (
+        <>
+          <Divider />
+          <SelectGroup label="High Contrast">
+            <MenuSearch>
+              <MenuSearchInput>
+                <ToggleGroup aria-label="High contrast theme switcher">
+                  <ToggleGroupItem
+                    text="System"
+                    buttonId={highContrastModes.SYSTEM}
+                    isSelected={highContrastMode === highContrastModes.SYSTEM}
+                    onChange={handleHighContrastThemeSelection}
+                  />
+                  <ToggleGroupItem
+                    text="On"
+                    buttonId={highContrastModes.ON}
+                    isSelected={highContrastMode === highContrastModes.ON}
+                    onChange={handleHighContrastThemeSelection}
+                  />
+                  <ToggleGroupItem
+                    text="Off"
+                    buttonId={highContrastModes.OFF}
+                    isSelected={highContrastMode === highContrastModes.OFF}
+                    onChange={handleHighContrastThemeSelection}
+                  />
+                </ToggleGroup>
+              </MenuSearchInput>
+            </MenuSearch>
+          </SelectGroup>
+        </>
       )}
     </Select>
   );

package/layouts/sideNavLayout/sideNavLayout.js

@@ -208,6 +208,10 @@ export function attachDocSearch(algolia, inputSelector, timeout) {
   }
 }
 
+function getIsDarkTheme() {
+  return document.documentElement.classList.contains('pf-v6-theme-dark');
+}
+
 export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp }) => {
   const algolia = process.env.algolia;
   const hasGdprBanner = process.env.hasGdprBanner;
@@ -221,8 +225,30 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
 
   const [versions, setVersions] = useState({ ...staticVersions });
   const [isRTL, setIsRTL] = useState(false);
+  const [isDarkTheme, setIsDarkTheme] = useState(true);
+
+  useEffect(() => {
+    setIsDarkTheme(getIsDarkTheme());
 
-  const { resolvedTheme } = useTheme(THEME_TYPES.COLOR);
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          setIsDarkTheme(getIsDarkTheme());
+        }
+      }
+    });
+  
+    const config = {
+      attributes: true,
+      attributeFilter: ['class']
+    };
+  
+    observer.observe(document.documentElement, config);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
 
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -335,7 +361,7 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
           defaultManagedSidebarIsOpen={navOpenProp}
         >
           {children}
-          {process.env.hasFooter && <Footer isDarkTheme={resolvedTheme === 'dark'} />}
+          {process.env.hasFooter && <Footer isDarkTheme={isDarkTheme} />}
         </Page>
         <div id="ws-page-banners">{hasGdprBanner && <GdprBanner />}</div>
       </RtlContext.Provider>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.28.0",
+  "version": "6.28.1",
   "author": "Red Hat",
   "license": "MIT",
   "bin": {
@@ -12,7 +12,7 @@
     "@babel/preset-env": "7.27.1",
     "@babel/preset-react": "^7.24.1",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.4.0-alpha.294",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.295",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "10.4.19",
     "babel-loader": "^9.1.3",
@@ -95,5 +95,5 @@
     "http-cache-semantics": ">=4.1.1",
     "nanoid": "3.3.8"
   },
-  "gitHead": "9b6d11065953f56deaa15d1013cc5a603d025503"
+  "gitHead": "683bdaf612aa0bd6b7c15daa4dc8d1c0ab514739"
 }