feat: add dark mode toggle

package.json

@@ -31,6 +31,7 @@
     "lucide-svelte": "^0.440.0",
     "mode-watcher": "^0.4.1",
     "svelte-headless-table": "^0.18.2",
+    "svelte-radix": "^1.1.1",
     "tailwind-merge": "^2.5.2",
     "tailwind-variants": "^0.2.1",
     "tailwindcss-animate": "^1.0.7"

src/entrypoints/options/App.svelte

@@ -9,18 +9,21 @@
   import Dataset from './components/Dataset.svelte'
   import Form from './components/Form.svelte'
   import { StarIcon } from 'lucide-svelte'
+  import DarkMode from './components/DarkMode.svelte'
+  import { Button } from '$lib/components/ui/button'
 </script>
 
 <Card class="container my-8">
   <CardHeader>
     <CardTitle class="flex items-center gap-2">
-      <span class="text-xl font-bold">Redirector</span>
-      <a
-        href="https://github.com/rxliuli/redirector"
-        target="_blank"
-        class="ml-auto"
-      >
-        <StarIcon class="w-4 h-4 text-yellow-500" />
+      <span class="text-xl font-bold mr-auto">Redirector</span>
+      <DarkMode />
+      <a href="https://github.com/rxliuli/redirector" target="_blank">
+        <Button variant="outline" size="icon">
+          <StarIcon
+            class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all text-yellow-500"
+          />
+        </Button>
       </a>
     </CardTitle>
   </CardHeader>

src/entrypoints/options/components/DarkMode.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Sun from 'svelte-radix/Sun.svelte'
+  import Moon from 'svelte-radix/Moon.svelte'
+  import { toggleMode } from 'mode-watcher'
+  import { Button } from '$lib/components/ui/button/index.js'
+</script>
+
+<Button on:click={toggleMode} 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>