Darkmode Styling

- Fixed bad paragraph HTML validation complaint

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;

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">

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}/>

src/styles/globals.scss

@@ -47,8 +47,8 @@ body {
 }
 
 .box-graphic {
-  .top { @apply fill-[#c9aa8a]; }
+  .top { @apply fill-[#c9aa8a] dark:fill-[#c09c77]; }
-  .left { @apply fill-[#ad8d6c]; }
+  .left { @apply fill-[#ad8d6c] dark:fill-[#a3805c]; }
-  .right {@apply fill-[#8f704e];}
+  .right {@apply fill-[#8f704e] dark:fill-[#876A4A];}
   .text { @apply fill-white; }
 }

tailwind.config.cjs

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: ["./src/**/*.{js,ts,jsx,tsx}"],
+    darkMode: 'class',
     theme: {
         extend: {
             fontFamily: {