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