From 9764bae73f74a5fc706b126d32e2c964e4f82234 Mon Sep 17 00:00:00 2001
From: decadez <decadez@yeah.net>
Date: Fri, 18 Feb 2022 19:44:03 +0800
Subject: [PATCH] Fix incorrect writing of custom documents

---
 beta/src/pages/_document.tsx | 102 ++++++++++++++++++-----------------
 1 file changed, 52 insertions(+), 50 deletions(-)
diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx
index d93094e0a08..e8be390231f 100644
--- a/beta/src/pages/_document.tsx
+++ b/beta/src/pages/_document.tsx
@@ -5,60 +5,62 @@
 import * as React from 'react';
 import Document, {Html, Head, Main, NextScript} from 'next/document';
 
-const MyDocument = () => {
-  //  @todo specify language in HTML?
-  return (
-    <Html lang="en">
-      <Head />
-      <body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-                (function () {
-                  function setTheme(newTheme) {
-                    window.__theme = newTheme;
-                    if (newTheme === 'dark') {
-                      document.documentElement.classList.add('dark');
-                    } else if (newTheme === 'light') {
-                      document.documentElement.classList.remove('dark');
+class MyDocument extends Document {
+  render() {
+    //  @todo specify language in HTML?
+    return (
+      <Html lang="en">
+        <Head />
+        <body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                  (function () {
+                    function setTheme(newTheme) {
+                      window.__theme = newTheme;
+                      if (newTheme === 'dark') {
+                        document.documentElement.classList.add('dark');
+                      } else if (newTheme === 'light') {
+                        document.documentElement.classList.remove('dark');
+                      }
                     }
-                  }
-
-                  var preferredTheme;
-                  try {
-                    preferredTheme = localStorage.getItem('theme');
-                  } catch (err) { }
-
-                  window.__setPreferredTheme = function(newTheme) {
-                    preferredTheme = newTheme;
-                    setTheme(newTheme);
+  
+                    var preferredTheme;
                     try {
                       localStorage.setItem('theme', newTheme);
                     } catch (err) { }
-                  };
-
-                  var initialTheme = preferredTheme;
-                  var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-                  if (!initialTheme) {
-                    initialTheme = darkQuery.matches ? 'dark' : 'light';
-                  }
-                  setTheme(initialTheme);
-
-                  darkQuery.addEventListener('change', function (e) {
-                    if (!preferredTheme) {
-                      setTheme(e.matches ? 'dark' : 'light');
+  
+                    window.__setPreferredTheme = function(newTheme) {
+                      preferredTheme = newTheme;
+                      setTheme(newTheme);
+                      try {
+                        localStorage.setItem('theme', newTheme);
+                      } catch (err) { }
+                    };
+  
+                    var initialTheme = preferredTheme;
+                    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  
+                    if (!initialTheme) {
+                      initialTheme = darkQuery.matches ? 'dark' : 'light';
                     }
-                  });
-                })();
-              `,
-          }}
-        />
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-};
+                    setTheme(initialTheme);
+  
+                    darkQuery.addEventListener('change', function (e) {
+                      if (!preferredTheme) {
+                        setTheme(e.matches ? 'dark' : 'light');
+                      }
+                    });
+                  })();
+                `,
+            }}
+          />
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
 
 export default MyDocument;
