Dark/Light Toggle, Use Persistent Stuff and Solid Icons

cmgriffing · Oct 19, 2024 · 18f4d7e · 18f4d7e
1 parent ba9eec9
commit 18f4d7e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 42 deletions.
diff --git a/playgrounds/app/src/components/Header.tsx b/playgrounds/app/src/components/Header.tsx
@@ -1,43 +1,33 @@
 import { useLocation } from '@solidjs/router'
 import { Button } from './ui/button'
 import { OcMarkgithub2 } from 'solid-icons/oc'
+import { FaSolidSun, FaSolidMoon } from 'solid-icons/fa'
 import { createThemeSwitcher } from '~/components/theme-switcher';
 
 export default function Nav() {
-     const [isDarkMode, toggleDarkMode] = createThemeSwitcher();
+    const [isDarkMode, toggleDarkMode] = createThemeSwitcher();
 
-     const handleToggle = (event: Event) => {
-         const target = event.target as HTMLInputElement;
-         toggleDarkMode(target.checked);
-       };
+    const handleToggle = () => {
+        toggleDarkMode();  // Call without arguments
+    };
 
   return (
     <header class="flex flex-col">
       <nav class="flex flex-row gap-2 justify-end p-4">
 
       <div>
-        <input 
-            type="checkbox" 
-            name="light-switch" 
-            id="light-switch" 
-            class="light-switch sr-only transition-all" 
-            checked={isDarkMode()}
-            onChange={handleToggle}
-        />
-        <label class="flex items-center justify-center cursor-pointer w-8 h-8 bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-600/80 rounded-full transition" for="light-switch">
-            <svg class="w-4 h-4 dark:hidden" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-            <title>Light mode</title>
-            <path class="fill-current text-neutral-400" d="M7 0h2v2H7V0Zm5.88 1.637 1.414 1.415-1.415 1.413-1.414-1.414 1.415-1.414ZM14 7h2v2h-2V7Zm-1.05 7.433-1.415-1.414 1.414-1.414 1.415 1.413-1.414 1.415ZM7 14h2v2H7v-2Zm-4.02.363L1.566 12.95l1.415-1.414 1.414 1.415-1.415 1.413ZM0 7h2v2H0V7Zm3.05-5.293L4.465 3.12 3.05 4.535 1.636 3.121 3.05 1.707Z" />
-            <path class="fill-current text-neutral-500" d="M8 4C5.8 4 4 5.8 4 8s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4Z" />
-            </svg>
-            <svg class="w-4 h-4 hidden dark:block" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-            <title>Dark mode</title>
-            <path class="fill-current text-neutral-200" d="M6.2 2C3.2 2.8 1 5.6 1 8.9 1 12.8 4.2 16 8.1 16c3.3 0 6-2.2 6.9-5.2C9.7 12.2 4.8 7.3 6.2 2Z" />
-            <path class="fill-current text-neutral-300" d="M12.5 6a.625.625 0 0 1-.625-.625 1.252 1.252 0 0 0-1.25-1.25.625.625 0 1 1 0-1.25 1.252 1.252 0 0 0 1.25-1.25.625.625 0 1 1 1.25 0c.001.69.56 1.249 1.25 1.25a.625.625 0 1 1 0 1.25c-.69.001-1.249.56-1.25 1.25A.625.625 0 0 1 12.5 6Z" />
-            </svg>
-            <span class="sr-only">Switch to light / dark version</span>
-        </label>
-        </div>
+        <button
+        onClick={handleToggle}
+        class="flex items-center justify-center cursor-pointer w-8 h-8 bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-600/80 rounded-full transition"
+        aria-label="Toggle dark mode"
+        >
+        {isDarkMode() ? (
+            <FaSolidMoon class="w-4 h-4 text-neutral-200" />
+        ) : (
+            <FaSolidSun class="w-4 h-4 text-neutral-500" />
+        )}
+        </button>
+    </div>
 
         <a href="https://github.com/cmgriffing/lithium" target="_blank" rel="noreferrer">
           <OcMarkgithub2 size={32} />

diff --git a/playgrounds/app/src/components/theme-switcher.tsx b/playgrounds/app/src/components/theme-switcher.tsx
@@ -1,28 +1,28 @@
 import { createSignal, createEffect } from "solid-js";
+import { makePersisted } from "@solid-primitives/storage";
 
 export function createThemeSwitcher() {
-  const [isDarkMode, setIsDarkMode] = createSignal(false);
+  const [isDarkMode, setIsDarkMode] = makePersisted(createSignal(false), {
+    name: "isDarkMode",
+    storage: localStorage,
+  });
 
   createEffect(() => {
     const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
-    const currentTheme = localStorage.getItem("theme");
+
+    if (isDarkMode()) {
+      document.body.classList.add("dark");
+    } else {
+      document.body.classList.remove("dark");
+    }
 
-    if (currentTheme === "dark") {
-      document.body.classList.toggle("dark", true);
-      setIsDarkMode(true);
-    } else if (currentTheme === "light") {
-      document.body.classList.toggle("dark", false);
-      setIsDarkMode(false);
-    } else if (prefersDarkScheme.matches) {
-      document.body.classList.toggle("dark", true);
-      setIsDarkMode(true);
+    if (isDarkMode() === null) {
+      setIsDarkMode(prefersDarkScheme.matches);
     }
   });
 
-  const toggleDarkMode = (value: boolean) => {
-    setIsDarkMode(value);
-    document.body.classList.toggle("dark", value);
-    localStorage.setItem("theme", value ? "dark" : "light");
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode());
   };
 
   return [isDarkMode, toggleDarkMode] as const;