Files
BRETT/app/components/ThemeSelector.vue
T
2026-10-03 21:32:57 +02:00

52 lines
1.6 KiB
Vue

<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: 'sunny-sprout', label: 'Sunny Sprout' },
{ value: 'spotify', label: 'Spotify' },
{ value: 'nordic', label: 'Nordic Theme' },
{ value: 'ss', label: 'SS' },
{ value: 'amethyst-haze', label: 'Amethyst Haze' },
{ value: 'deep-wine', label: 'Deep Wine' },
{ value: 'my-claude', label: 'myClaude' },
{ value: 'neo', label: 'Neo' },
] 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>