Light/Dark Mode Toggler Code Cleanup

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

Hide file tree

Showing 2 changed files with 22 additions and 31 deletions.
diff --git a/playgrounds/app/src/components/Header.tsx b/playgrounds/app/src/components/Header.tsx
@@ -8,7 +8,6 @@ export default function Nav() {
 
      const handleToggle = (event: Event) => {
          const target = event.target as HTMLInputElement;
-         console.log('Toggle clicked', target.checked);
          toggleDarkMode(target.checked);
        };
 
@@ -17,28 +16,28 @@ export default function Nav() {
       <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>
+        <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>
 
         <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
@@ -4,22 +4,15 @@ export function createThemeSwitcher() {
   const [isDarkMode, setIsDarkMode] = createSignal(false);
 
   createEffect(() => {
-    // Check for dark mode preference at the system level
     const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
-
-    // Get the user's theme preference from local storage, if it's available
     const currentTheme = localStorage.getItem("theme");
 
-    // If the user's preference in localStorage is dark...
     if (currentTheme === "dark") {
-      // ...let's toggle the .dark-theme class on the body
       document.body.classList.toggle("dark", true);
       setIsDarkMode(true);
-    // Otherwise, if the user's preference in localStorage is light...
     } else if (currentTheme === "light") {
       document.body.classList.toggle("dark", false);
       setIsDarkMode(false);
-    // If the user hasn't made a preference, let's check the system preference
     } else if (prefersDarkScheme.matches) {
       document.body.classList.toggle("dark", true);
       setIsDarkMode(true);
@@ -28,7 +21,6 @@ export function createThemeSwitcher() {
 
   const toggleDarkMode = (value: boolean) => {
     setIsDarkMode(value);
-    console.log('boink');
     document.body.classList.toggle("dark", value);
     localStorage.setItem("theme", value ? "dark" : "light");
   };