From 43089dd4abd9ae1df64d9ef5a1bcc540a2b7de54 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 14 Sep 2022 18:43:51 -0700
Subject: [PATCH] Switch to Chakra's standard `ColorModeScript`

We'd previously emulated this tag's functionality in create-react-app via copy-paste, but now we can just use it directly the standard way!
---
 pages/_document.tsx | 40 ++--------------------------------------
 1 file changed, 2 insertions(+), 38 deletions(-)

diff --git a/pages/_document.tsx b/pages/_document.tsx
index 9c6c392..ec90d77 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,3 +1,4 @@
+import { ColorModeScript } from "@chakra-ui/react";
 import Document, { Html, Head, Main, NextScript } from "next/document";
 
 class MyDocument extends Document {
@@ -66,44 +67,7 @@ class MyDocument extends Document {
             as="font"
             crossOrigin=""
           />
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-      // HACK: This is copy-pasted output from Chakra's <ColorModeScript />. It
-      //       initializes our color mode to match the system color mode. The
-      //       component is built for a special Document element like in
-      //       Next.js, but in create-react-app this is the best we can do!
-      (function setColorModeVar(initialValue) {
-        var mql = window.matchMedia("(prefers-color-scheme: dark)");
-        var systemPreference = mql.matches ? "dark" : "light";
-        var persistedPreference;
-
-        try {
-          persistedPreference = localStorage.getItem("chakra-ui-color-mode");
-        } catch (error) {
-          console.log(
-            "Chakra UI: localStorage is not available. Color mode persistence might not work as expected"
-          );
-        }
-
-        var isInStorage = typeof persistedPreference === "string";
-        var colorMode;
-
-        if (isInStorage) {
-          colorMode = persistedPreference;
-        } else {
-          colorMode =
-            initialValue === "system" ? systemPreference : initialValue;
-        }
-
-        if (colorMode) {
-          var root = document.documentElement;
-          root.style.setProperty("--chakra-ui-color-mode", colorMode);
-        }
-      })("system");
-    `,
-            }}
-          />
+          <ColorModeScript initialColorMode="light" />
           <noscript>You need to enable JavaScript to run this app.</noscript>
         </Head>