Merge pull request #408 from IABTechLab/llp-uid2-2609-theme-fix

Fix for theme switching when jumping between docs pages and marketing…

docusaurus.config.js

@@ -102,8 +102,7 @@ const config = {
       // Replace with your project's social card
       image: "img/uid2-social-card.jpg",
       colorMode: {
-        defaultMode: "dark",
-        disableSwitch: true,
+        defaultMode: "light"
       },
 
       navbar: {

src/components/HomepageHero/index.tsx

@@ -7,11 +7,18 @@ import { useIsJapanese } from "@site/src/utils/isJapanese";
 import { useColorMode } from "@docusaurus/theme-common";
 export default function HomepageHero(): JSX.Element {
   const isJapanese = useIsJapanese();
-  const { setColorMode } = useColorMode();
+  const { setColorMode, colorMode } = useColorMode();
 
   //quick fix for updating color mode on page load breaking after theme upgrade
   React.useEffect(() => {
-    setColorMode("dark");
+    const originalTheme = colorMode;
+
+    // The second parameter exists, it's just not on the type :(
+    setColorMode("dark", { persist: false });
+
+    return () => {
+      setColorMode(originalTheme);
+    };
   }, []);
 
   return (

src/theme/Layout/Provider/index.js

@@ -0,0 +1,40 @@
+import React, { useEffect } from "react";
+import { composeProviders, useColorMode } from "@docusaurus/theme-common";
+import { useLocation } from "@docusaurus/router";
+import {
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  DocsPreferredVersionContextProvider,
+  ScrollControllerProvider,
+  NavbarProvider,
+  PluginHtmlClassNameProvider,
+} from "@docusaurus/theme-common/internal";
+const Provider = composeProviders([
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  ScrollControllerProvider,
+  DocsPreferredVersionContextProvider,
+  PluginHtmlClassNameProvider,
+  NavbarProvider,
+]);
+
+function RestoreTheme() {
+  const { setColorMode } = useColorMode();
+  useEffect(() => {
+    const storedTheme = localStorage.getItem("theme");
+    setColorMode(storedTheme);
+  }, []);
+  return <></>;
+}
+
+export default function LayoutProvider({ children }) {
+  const location = useLocation();
+  let isDocsPage = location.pathname.includes("/docs/");
+
+  return (
+    <Provider>
+      {isDocsPage ? <RestoreTheme></RestoreTheme> : null}
+      {children}
+    </Provider>
+  );
+}

src/theme/Navbar/Layout/index.tsx

@@ -1,6 +1,6 @@
 import React, { type ComponentProps } from "react";
 import clsx from "clsx";
-import { useThemeConfig, useColorMode } from "@docusaurus/theme-common";
+import { useThemeConfig } from "@docusaurus/theme-common";
 import {
   useHideableNavbar,
   useNavbarMobileSidebar,
@@ -28,17 +28,6 @@ export default function NavbarLayout({ children }: Props): JSX.Element {
   } = useThemeConfig();
   const mobileSidebar = useNavbarMobileSidebar();
   const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
-  const { colorMode, setColorMode } = useColorMode();
-
-  React.useEffect(() => {
-    const isMarketingPage =
-      document.documentElement.classList.contains("plugin-pages");
-    if (isMarketingPage) {
-      setColorMode("dark");
-    } else {
-      setColorMode("light");
-    }
-  }, []);
 
   return (
     <nav
@@ -59,7 +48,7 @@ export default function NavbarLayout({ children }: Props): JSX.Element {
           "navbar--dark": style === "dark",
           "navbar--primary": style === "primary",
           "navbar-sidebar--show": mobileSidebar.shown,
-        }
+        },
       )}
     >
       {children}