From 5ccbcfbe863a23bff8a7f1c7629d8ed0a8079b78 Mon Sep 17 00:00:00 2001
From: bbuilds <hello@brandenbuilds.com>
Date: Tue, 30 Apr 2024 09:59:59 -0500
Subject: [PATCH] fix: :bug: force dark mode on marketing pages

---
 src/components/HomepageHero/index.tsx | 16 ++--------------
 src/components/PageHeader/index.tsx   |  3 +++
 src/utils/useForcedDarkTheme.ts       | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 src/utils/useForcedDarkTheme.ts

diff --git a/src/components/HomepageHero/index.tsx b/src/components/HomepageHero/index.tsx
index 8132b7f80..ff32731c4 100644
--- a/src/components/HomepageHero/index.tsx
+++ b/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)}>
diff --git a/src/components/PageHeader/index.tsx b/src/components/PageHeader/index.tsx
index b2a64b288..b5645b2b2 100644
--- a/src/components/PageHeader/index.tsx
+++ b/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">
diff --git a/src/utils/useForcedDarkTheme.ts b/src/utils/useForcedDarkTheme.ts
new file mode 100644
index 000000000..6979541c1
--- /dev/null
+++ b/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);
+    };
+  }, []);
+}