Place dark mode switch in top right with icons, Fix footer dark mode color

package.json

@@ -9,6 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.13",
     "@tanstack/react-query": "^4.16.0",
     "@trpc/client": "^10.0.0",
     "@trpc/next": "^10.0.0",

src/components/DarkModeSwitch.tsx

@@ -1,8 +1,7 @@
 import React, {FunctionComponent, useEffect, useState} from "react";
 
-
-interface SwitchProps {
-}
+import {MoonIcon, SunIcon} from "@heroicons/react/24/outline";
+import {classNames} from "@/utils/helpers";
 
 function setMode(dark: boolean) {
     if (dark)
@@ -15,14 +14,21 @@ function prefersDark(): boolean {
     return window.matchMedia('(prefers-color-scheme: dark)').matches
 }
 
-const DarkModeSwitch: FunctionComponent<SwitchProps> = ({}: SwitchProps) => {
-    const [, setDark] = useState<boolean | null>(null);
+interface SwitchProps {
+    className?: string;
+}
+
+const DarkModeSwitch: FunctionComponent<SwitchProps> = ({className}: SwitchProps) => {
+    const [dark, setDark] = useState<boolean | null>(null);
     useEffect(() => {
-        setMode(prefersDark())
-    })
+        if (prefersDark()) {
+            setDark(true);
+            setMode(true);
+        }
+    }, [])
 
     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"}
+        className={classNames(className, "rounded p-1.5 text-zinc-500 shadow dark:shadow-none dark:border border-zinc-800 font-inter")}
         onClick={() => {
             setDark((wasDark) => {
                 // On page load or when changing themes, best to add inline in `head` to avoid FOUC
@@ -35,7 +41,9 @@ const DarkModeSwitch: FunctionComponent<SwitchProps> = ({}: SwitchProps) => {
             })
         }
 
-        }>Toggle Mode</button>
+        }>
+        {dark ? <MoonIcon className="w-5 h-5"/> : <SunIcon className="w-5 h-5"/>}
+    </button>
 }
 
 export default DarkModeSwitch;

src/components/Page.tsx

@@ -10,12 +10,13 @@ interface PageProps {
 const Page: FunctionComponent<PageProps> = ({children}: PageProps) => {
     return (
         <>
-            <main className="flex w-full flex-col items-center bg-white dark:bg-zinc-900">
+            <main className="flex w-full flex-col items-center bg-white dark:bg-zinc-900 text-gray-700 dark:text-gray-300">
+                <DarkModeSwitch className="absolute top-5 right-5" />
                 <div className="mt-8 px-3 max-w-screen-md w-[90%]">
                     <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">

yarn.lock

@@ -32,6 +32,11 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@heroicons/react@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.13.tgz#9b1cc54ff77d6625c9565efdce0054a4bcd9074c"
+  integrity sha512-iSN5XwmagrnirWlYEWNPdCDj9aRYVD/lnK3JlsC9/+fqGF80k8C7rl+1HCvBX0dBoagKqOFBs6fMhJJ1hOg1EQ==
+
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"