forked from BRETT/BRETT
47 lines
1.3 KiB
Vue
47 lines
1.3 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: '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>
|