Remove react hook and use javascript to detect theme state

src/components/Layout.js

@@ -11,7 +11,6 @@ import Footer from "../components/Footer";
 import { Helmet } from "react-helmet";
 import Button from "./Button";
 import Cookies from "js-cookie";
-import useDarkModeState from "../libs/useDarkModeState";
 
 const addAnalyticsScripts = () => {
     console.log('Analytics Enabled');
@@ -64,15 +63,15 @@ const handleDeclineCookie = () => {
     cookiesDeclined = true;
 };
 
-const Layout = ({ children, title }) => {
-    const isDark = useDarkModeState();
+
+const Layout = ({ children, title}) => {
 
     const hasConsent = getCookieConsent();
     if (hasConsent)
         initializeCookies();
 
     return (
-        <main className={isDark ? "dark" : "light"}>
+        <main> 
             <Helmet htmlAttributes={{ lang: "en" }}>
                 <title>{title}</title>
             </Helmet>

src/libs/configureDarkMode.js

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright © 2022 Skyline Team and Contributors (https://github.com/skyline-emu/)
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+
+const colorSchemeMedia = "(prefers-color-scheme: dark)";
+const isBrowser = () => typeof window !== "undefined"
+
+const configureDarkMode = () => {
+
+    if (isBrowser()) {
+        if (window.matchMedia(colorSchemeMedia).matches) {
+            document.documentElement.classList.add('dark')
+        } else {
+            document.documentElement.classList.add('light')
+        }
+    }
+
+    // TODO: Add a switch that respects local storage and allows user to choose
+};
+
+export default configureDarkMode;

src/pages/404.js

@@ -8,9 +8,13 @@ import * as React from "react";
 import Layout from "../components/Layout";
 import Button from "../components/Button";
 import { FaHome } from "react-icons/fa";
+import configureDarkMode from "../libs/configureDarkMode";
 
 // markup
 const NotFoundPage = () => {
+
+    configureDarkMode();
+
     return (
         <Layout title="404 - Not Found">
             <div className="w-full min-h-screen dark:text-white flex flex-col items-center justify-center">

src/pages/download.js

@@ -12,8 +12,13 @@ import useSWR from "swr";
 import config from "../config";
 import { Helmet } from "react-helmet";
 import Spinner from "../components/Spinner";
+import configureDarkMode from "../libs/configureDarkMode";
+
 
 const IndexPage = () => {
+
+    configureDarkMode();
+
     const { data } = useSWR(config.builds_api_url, (url) => axios.get(url).then((r) => r.data));
 
     return (

src/pages/index.js

@@ -9,8 +9,13 @@ import Landing from "../sections/Landing";
 import About from "../sections/About";
 import Team from "../sections/Team";
 import Layout from "../components/Layout";
+import configureDarkMode from "../libs/configureDarkMode";
+
 
 const IndexPage = () => {
+
+    configureDarkMode();
+
     return (
         <Layout title="Skyline - Nintendo Switch Emulator">
             <Landing />

src/pages/privacy-policy.js

@@ -7,8 +7,12 @@
 import * as React from "react";
 import Layout from "../components/Layout";
 import CustomLink from "../components/CustomLink";
+import configureDarkMode from "../libs/configureDarkMode";
 
 const PrivacyPolicyPage = () => {
+
+    configureDarkMode();
+
     return (
         <Layout title="Privacy Policy">
             <div className="mx-16 text-gray-800 dark:text-white">

tailwind.config.js

@@ -6,7 +6,7 @@
 
 module.exports = {
     content: ["./src/**/*.{js,jsx,ts,tsx}"],
-    darkMode: "class",
+    darkMode: ['class'],
     i18n: {
         locales: ["en-US"],
         defaultLocale: "en-US",