From 097cf4a111207b58f712caf23de832d022d4a7b8 Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Sun, 18 Dec 2022 02:35:15 -0600
Subject: [PATCH] Darkmode Styling

- Fixed bad paragraph HTML validation complaint
---
 src/components/DarkModeSwitch.tsx | 41 +++++++++++++++++++++++++++++++
 src/components/Page.tsx           |  6 +++--
 src/pages/index.tsx               |  6 ++---
 src/styles/globals.scss           |  6 ++---
 tailwind.config.cjs               |  1 +
 5 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 src/components/DarkModeSwitch.tsx

diff --git a/src/components/DarkModeSwitch.tsx b/src/components/DarkModeSwitch.tsx
new file mode 100644
index 0000000..3a9da76
--- /dev/null
+++ b/src/components/DarkModeSwitch.tsx
@@ -0,0 +1,41 @@
+import React, {FunctionComponent, useEffect, useState} from "react";
+
+
+interface SwitchProps {
+}
+
+function setMode(dark: boolean) {
+    if (dark)
+        document.documentElement.classList.add('dark')
+    else
+        document.documentElement.classList.remove('dark')
+}
+
+function prefersDark(): boolean {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+const DarkModeSwitch: FunctionComponent<SwitchProps> = ({}: SwitchProps) => {
+    const [, setDark] = useState<boolean | null>(null);
+    useEffect(() => {
+        setMode(prefersDark())
+    })
+
+    return <button
+        className={"rounded px-3 py-1.5 bg-slate-600 dark:bg-zinc-200 text-zinc-50 dark:text-gray-800 shadow font-inter"}
+        onClick={() => {
+            setDark((wasDark) => {
+                // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+                if (wasDark === null && prefersDark() || !wasDark) {
+                    setMode(true);
+                    return true;
+                }
+                setMode(false);
+                return false;
+            })
+        }
+
+        }>Toggle Mode</button>
+}
+
+export default DarkModeSwitch;
\ No newline at end of file
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index 590056d..9087b51 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import type {FunctionComponent} from "react";
 import React from "react";
+import DarkModeSwitch from "@/components/DarkModeSwitch";
 
 interface PageProps {
     children: React.ReactNode;
@@ -9,11 +10,12 @@ interface PageProps {
 const Page: FunctionComponent<PageProps> = ({children}: PageProps) => {
     return (
         <>
-            <main className="flex w-full flex-col items-center bg-white">
+            <main className="flex w-full flex-col items-center bg-white dark:bg-zinc-900">
                 <div className="mt-8 px-3 max-w-screen-md w-[90%]">
-                    <h1 className="text-3xl font-rokkitt text-zinc-800 sm:text-5xl mb-2">
+                    <h1 className="text-3xl font-rokkitt text-zinc-800 dark:text-zinc-100 sm:text-5xl mb-2">
                         <Link href={"/"}>100Prisoners.com</Link>
                     </h1>
+                    <DarkModeSwitch />
                     {children}
                     <div className="flex flex-col items-center">
                         <div className="grid py-1 grid-cols-1 gap-x-1 whitespace-nowrap divide-x-2">
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 48e9443..cc64dcf 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -13,7 +13,7 @@ const Home: NextPage = () => {
                 <link rel="icon" href="/favicon.ico"/>
             </Head>
             <Page>
-                <div className="prose lg:prose-xl">
+                <div className="prose dark:prose-invert lg:prose-xl">
                     <p>
                         This website is dedicated to exploring the intriguing 100 prisoners problem, a mathematical
                         challenge that seems astronomically impossible at first, yet can leverage mathematics to
@@ -54,7 +54,7 @@ const Home: NextPage = () => {
                         this challenge to be impossible - but it turns out there is a strategy that guarantees a
                         <b> 31%</b> chance of success!
                     </p>
-                    <p>
+                    <div>
                         Here&apos;s how it works: <br/>
                         <ol>
                             <li>
@@ -70,7 +70,7 @@ const Home: NextPage = () => {
                         </ol>
                         Due to an interesting mathematical quirk of some (assumed) properties of the game,
                         the boxes have an interesting structure to their existence.
-                    </p>
+                    </div>
                     <div className="pt-4 pb-2">
                         <NoSSR>
                             <BoxLoop count={5}/>
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 6c8e5a7..aad3c97 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -47,8 +47,8 @@ body {
 }
 
 .box-graphic {
-  .top { @apply fill-[#c9aa8a]; }
-  .left { @apply fill-[#ad8d6c]; }
-  .right {@apply fill-[#8f704e];}
+  .top { @apply fill-[#c9aa8a] dark:fill-[#c09c77]; }
+  .left { @apply fill-[#ad8d6c] dark:fill-[#a3805c]; }
+  .right {@apply fill-[#8f704e] dark:fill-[#876A4A];}
   .text { @apply fill-white; }
 }
\ No newline at end of file
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index a668cff..e4e0299 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: ["./src/**/*.{js,ts,jsx,tsx}"],
+    darkMode: 'class',
     theme: {
         extend: {
             fontFamily: {