diff options
Diffstat (limited to 'code/frontend/src/components/style-changer.svelte')
| -rw-r--r-- | code/frontend/src/components/style-changer.svelte | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/code/frontend/src/components/style-changer.svelte b/code/frontend/src/components/style-changer.svelte new file mode 100644 index 0000000..b219b10 --- /dev/null +++ b/code/frontend/src/components/style-changer.svelte @@ -0,0 +1,22 @@ +<script lang="ts"> + import Sun from 'svelte-radix/Sun.svelte' + import Moon from 'svelte-radix/Moon.svelte' + import { resetMode, setMode } from 'mode-watcher' + import { Button } from '$components/ui/button' + import * as DropdownMenu from '$components/ui/dropdown-menu' +</script> + +<DropdownMenu.Root> + <DropdownMenu.Trigger asChild let:builder> + <Button builders={[builder]} variant="outline" size="icon"> + <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> + </DropdownMenu.Trigger> + <DropdownMenu.Content align="end"> + <DropdownMenu.Item on:click={() => setMode('light')}>Light</DropdownMenu.Item> + <DropdownMenu.Item on:click={() => setMode('dark')}>Dark</DropdownMenu.Item> + <DropdownMenu.Item on:click={() => resetMode()}>System</DropdownMenu.Item> + </DropdownMenu.Content> +</DropdownMenu.Root> |