fix(docs-framework): remove useTheme from footer to fix theme state bug (#4817)

* fix(docs-framework): remove useTheme from footer to fix theme state bug

* fix(theme-switcher): add loading spinner for the theme switcher

* add missing comma from conflict resolution

---------

Co-authored-by: Nicole Thoen <nthoen@redhat.com>

Author: wise-king-sullyman

packages/documentation-framework/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>
   );

packages/documentation-framework/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>