Remove react hook and use javascript to detect theme state

src/components/Button.js

@@ -9,6 +9,7 @@ import { Link } from "gatsby";
 import AnchorLink from 'react-anchor-link-smooth-scroll-v2'
 import rippleFn from "../libs/ripple";
 import classNames from "classnames";
+import { getPathName } from "../libs/utils";
 
 const ButtonInner = ({ icon, text, className }) => (
     <div role="button" tabIndex={0} className={classNames("button relative overflow-hidden", className)} onMouseDown={rippleFn} onTouchStart={rippleFn}>
@@ -17,15 +18,9 @@ const ButtonInner = ({ icon, text, className }) => (
     </div>
 );
 
-const GetPathName = () => {
-    if (typeof window !== "undefined")
-        return window.location.pathname;
-    return "";
-}
-
 const Button = ({ href="", icon, text, onClick, className }) =>  {
-    if (href.startsWith(GetPathName() + "#"))
-        href = href.substring(GetPathName().length);
+    if (href.startsWith(getPathName() + "#"))
+        href = href.substring(getPathName().length);
 
     return href.startsWith("http") ? (
         <a href={href} onClick={onClick} rel="noreferrer" target="_blank" tabIndex={-1}>

src/components/CustomLink.js

@@ -9,16 +9,11 @@ import { Link } from "gatsby";
 import AnchorLink from 'react-anchor-link-smooth-scroll-v2'
 import rippleFn from "../libs/ripple";
 import classnames from "classnames";
-
-const GetPathName = () => {
-    if (typeof window !== "undefined")
-        return window.location.pathname;
-    return "";
-}
+import { getPathName } from "../libs/utils";
 
 const CustomLink = ({ style, href, children, className, ripple }) =>  {
-    if (href.startsWith(GetPathName() + "#"))
-        href = href.substring(GetPathName().length);
+    if (href.startsWith(getPathName() + "#"))
+        href = href.substring(getPathName().length);
 
     return href.startsWith("http") ? (
         <a

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,14 @@ 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,23 @@
+/**
+ * @license
+ * Copyright © 2022 Skyline Team and Contributors (https://github.com/skyline-emu/)
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+
+import { isBrowser } from "./utils";
+import { colorSchemeMedia } from "./utils";
+
+const configureDarkMode = () => {
+
+    if (isBrowser()) {
+        if (window.matchMedia(colorSchemeMedia).matches) {
+            document.documentElement.classList.add('dark')
+        } else {
+            document.documentElement.classList.add('light')
+        }
+    }
+
+};
+
+export default configureDarkMode;

src/libs/utils.js

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright © 2022 Skyline Team and Contributors (https://github.com/skyline-emu/)
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+export const colorSchemeMedia = "(prefers-color-scheme: dark)";
+export const isBrowser = () => typeof window !== "undefined"
+export const getPathName = () => {
+
+    if (isBrowser()) {
+        return window.location.pathname; 
+    } else {
+        return "";
+    }
+
+}

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,12 @@ 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",