From ced66c5807575cd29f6aa5632e8ad02b38c8448a Mon Sep 17 00:00:00 2001
From: ivar <i@oiee.no>
Date: Sun, 28 Apr 2024 22:37:30 +0200
Subject: WIP new frontend

---
 code/frontend/src/components/style-changer.svelte | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 code/frontend/src/components/style-changer.svelte

(limited to 'code/frontend/src/components/style-changer.svelte')

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>
-- 
cgit v1.3