feat: clickable label for theme switch

EATSTEAK · Dec 9, 2023 · a63c759 · a63c759
1 parent 3f9f245
commit a63c759
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/src/components/LightSwitch.tsx b/src/components/LightSwitch.tsx
@@ -26,7 +26,13 @@ export const LightSwitch: Component<{}> = () => {
   });
   return (
     <div class="flex items-center justify-start">
+      <label for="lightswitch" class="align-center font-mono hidden lg:inline">
+        <Show when={isDarkTheme()} fallback="LIGHT">
+          DARK
+        </Show>
+      </label>
       <Switch
+        id="lightswitch"
         enabled={isDarkTheme()}
         onChange={(e) => setDarkTheme(e.target.checked)}
       >
@@ -42,11 +48,6 @@ export const LightSwitch: Component<{}> = () => {
           </Show>
         </div>
       </Switch>
-      <span class="align-center font-mono w-16">
-        <Show when={isDarkTheme()} fallback="LIGHT">
-          DARK
-        </Show>
-      </span>
     </div>
   );
 };