Initial Commit

app/components/ThemeSelector.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+
+const mode = useTheme()
+
+const themes = [
+  { value: 'standard', label: 'Standard' },
+  { value: 'discord', label: 'Discord' },
+  { value: 'cyberpunk', label: 'Cyberpunk' },
+  { value: 'spring', label: 'Spring' },
+  { value: 'terminal', label: 'Terminal' },
+  { value: 'infoseer', label: 'Infoseer' },
+  { value: 'homebrew', label: 'Homebrew' },
+  { value: 'florense', label: 'Florense' },
+  { value: 'kawi-green', label: 'Kawi Green' },
+  { value: 'clonz', label: 'Clo.nz' },
+  { value: 'clawmorphism', label: 'Clawmorphism' },
+  { value: 'realmorphism', label: 'Realmorphism' },
+  { value: 'amber', label: 'Amber' },
+  { value: 'neo', label: 'Neo' },
+  { value: 'neo-pink', label: 'Neo Pink' },
+  { value: 'neo-mint', label: 'Neo Mint' },
+] as const
+</script>
+
+<template>
+  <Select v-model="mode">
+    <SelectTrigger class="h-9 w-[150px]">
+      <div class="flex items-center gap-2">
+        <Icon name="ph:palette-fill" class="size-4 text-muted-foreground" />
+        <SelectValue placeholder="Theme" />
+      </div>
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem v-for="t in themes" :key="t.value" :value="t.value">
+        {{ t.label }}
+      </SelectItem>
+    </SelectContent>
+  </Select>
+</template>