Merge pull request #551 from IABTechLab/feature/fix-marketing-color-mode

fix: 🐛 Force dark mode on marketing pages

Author: genwhittTTD

src/components/HomepageHero/index.tsx

@@ -6,22 +6,10 @@ import HeroDesktopBg from "@site/static/img/hero-desktop.svg";
 import HeroMobileBg from "@site/static/img/hero-mobile.svg";
 import styles from "./styles.module.scss";
 import { useIsJapanese } from "@site/src/utils/isJapanese";
-import { useColorMode } from "@docusaurus/theme-common";
+import { useForcedDarkTheme } from "@site/src/utils/useForcedDarkTheme";
 export default function HomepageHero(): JSX.Element {
   const isJapanese = useIsJapanese();
-  const { setColorMode, colorMode } = useColorMode();
-
-  //quick fix for updating color mode on page load breaking after theme upgrade
-  React.useEffect(() => {
-    const originalTheme = colorMode;
-
-    // The second parameter exists, it's just not on the type :(
-    setColorMode("dark", { persist: false });
-
-    return () => {
-      setColorMode(originalTheme);
-    };
-  }, []);
+  useForcedDarkTheme();
 
   return (
     <header className={clsx("bg-11-o-clock text-white", styles.homepageHero)}>

src/components/PageHeader/index.tsx

@@ -2,6 +2,7 @@
 import React from "react";
 import clsx from "clsx";
 import styles from "./styles.module.scss";
+import { useForcedDarkTheme } from "@site/src/utils/useForcedDarkTheme";
 
 type PageHeaderProps = {
   heading: string;
@@ -12,6 +13,8 @@ export default function PageHeader({
   heading,
   subheading,
 }: PageHeaderProps): JSX.Element {
+  useForcedDarkTheme();
+
   return (
     <header className={clsx("bg-11-o-clock text-white", styles.pageHeader)}>
       <div className="container">

src/utils/useForcedDarkTheme.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { useColorMode } from "@docusaurus/theme-common";
+
+export function useForcedDarkTheme() {
+  const { setColorMode, colorMode } = useColorMode();
+  //quick fix for updating color mode on page load breaking after theme upgrade
+  React.useEffect(() => {
+    const originalTheme = colorMode;
+
+    // The second parameter exists, it's just not on the type :(
+    setColorMode("dark", { persist: false });
+
+    return () => {
+      setColorMode(originalTheme);
+    };
+  }, []);
+}