diff options
| author | ivar <i@oiee.no> | 2024-04-28 22:37:30 +0200 |
|---|---|---|
| committer | ivar <i@oiee.no> | 2024-04-28 22:37:30 +0200 |
| commit | ced66c5807575cd29f6aa5632e8ad02b38c8448a (patch) | |
| tree | 01760648ee293a2aef2288328014b5747d2192b4 /code/frontend/src/components/style-changer.svelte | |
| parent | 691ad60d7bff5934053d87267c4e303ef3ed5f97 (diff) | |
| download | greatoffice-ced66c5807575cd29f6aa5632e8ad02b38c8448a.tar.xz greatoffice-ced66c5807575cd29f6aa5632e8ad02b38c8448a.zip | |
WIP new frontend
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> |