arithefirst/svchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Tooltip for theme switcher

Browse Source
This commit is contained in:
April Hall 2025-02-15 22:00:14 -05:00
parent 3f98b1f91e
commit 77946c8ac6
Signed by: arithefirst
GPG Key ID: 4508A15C4DB91C5B
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/lib/components/modeSwitcher.svelte
View File

@ -1,12 +1,19 @@
<script lang="ts"> <script lang="ts">
import { Button } from '$lib/components/ui/button/index'; 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 Moon from 'lucide-svelte/icons/moon-star';
import Sun from 'lucide-svelte/icons/sun'; import Sun from 'lucide-svelte/icons/sun';
import { toggleMode } from 'mode-watcher'; import { toggleMode } from 'mode-watcher';
</script> </script>
<Button on:click={toggleMode} variant="secondary" size="icon" class="ml-auto"> <Tooltip.Root>
<Sun class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" /> <Tooltip.Trigger class="ml-auto">
<Moon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> <Button on:click={toggleMode} variant="secondary" size="icon">
<span class="sr-only">Toggle theme</span> <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> </Button>
</Tooltip.Trigger>
<Tooltip.Content>
<p>Toggle theme</p>
</Tooltip.Content>
</Tooltip.Root>