From 77946c8ac6ae36ef4e25ee881bedf2c36c4eeec1 Mon Sep 17 00:00:00 2001
From: April Hall <ari@arithefirst.com>
Date: Sat, 15 Feb 2025 22:00:14 -0500
Subject: [PATCH] feat: Tooltip for theme switcher

---
 src/lib/components/modeSwitcher.svelte | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/modeSwitcher.svelte b/src/lib/components/modeSwitcher.svelte
index 04e986c..061d0e5 100644
--- a/src/lib/components/modeSwitcher.svelte
+++ b/src/lib/components/modeSwitcher.svelte
@@ -1,12 +1,19 @@
 <script lang="ts">
   import { Button } from '$lib/components/ui/button/index';
+  import * as Tooltip from '$lib/components/ui/tooltip';
   import Moon from 'lucide-svelte/icons/moon-star';
   import Sun from 'lucide-svelte/icons/sun';
   import { toggleMode } from 'mode-watcher';
 </script>
 
-<Button on:click={toggleMode} variant="secondary" size="icon" class="ml-auto">
-  <Sun class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-  <Moon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-  <span class="sr-only">Toggle theme</span>
-</Button>
+<Tooltip.Root>
+  <Tooltip.Trigger class="ml-auto">
+    <Button on:click={toggleMode} variant="secondary" size="icon">
+      <Sun class="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon class="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    </Button>
+  </Tooltip.Trigger>
+  <Tooltip.Content>
+    <p>Toggle theme</p>
+  </Tooltip.Content>
+</Tooltip.Root>