refactor theme toggler code

src/lib/ThemeToggle.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import { afterUpdate } from "svelte";
 	import DarkMode from "svelte-dark-mode";
-	import type { Theme } from "svelte-dark-mode/types/DarkMode.svelte";
 
-	let theme: Theme;
+	let theme: "dark" | "light";
 
 	afterUpdate(() => {
 		document.documentElement.className = theme;
@@ -16,16 +15,4 @@
 
 <DarkMode bind:theme />
 
-{#if theme === "dark"}
-	<div on:click={toggle} class="i-fa6-solid:sun" />
-{:else if theme === "light"}
-	<div on:click={toggle} class="i-fa6-solid:moon" />
-{/if}
-
-<style>
-	div {
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-	}
-</style>
+<div on:click={toggle} class="i-fa6-solid:{theme === "dark" ? "sun" : "moon"} cursor-pointer flex items-center" />

uno.config.ts

@@ -20,5 +20,7 @@ export default defineConfig({
 		})
 	],
 
-	transformers: [transformerVariantGroup(), transformerDirectives()]
+	transformers: [transformerVariantGroup(), transformerDirectives()],
+
+	safelist: ["i-fa6-solid:moon", "i-fa6-solid:sun"]
 });