069a85cf11
Replace all hardcoded hex color values with semantic Tailwind design tokens: - `#bb5b3e` → `accent` - `#a34a31` → `accent-content` / `primary-dark` - `#4a3f3b`, `#89726c` → `zinc-800`, `zinc-500` - `#e5ded7`, `#faf6f3` → `zinc-300`, `zinc-50` - `#8
62 lines
2.0 KiB
Vue
62 lines
2.0 KiB
Vue
<template>
|
|
<div class="space-y-6 max-w-lg">
|
|
<div class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-5">
|
|
<h2 class="text-lg font-black text-zinc-800">Appearance</h2>
|
|
<p class="text-sm text-zinc-500">Choose how FuelAlert looks to you.</p>
|
|
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<button
|
|
v-for="option in themeOptions"
|
|
:key="option.value"
|
|
@click="setTheme(option.value)"
|
|
class="flex flex-col items-center gap-3 p-4 rounded-2xl border-2 transition-all"
|
|
:class="selectedTheme === option.value
|
|
? 'border-accent bg-zinc-50'
|
|
: 'border-zinc-300 hover:border-zinc-500'"
|
|
>
|
|
<iconify-icon :icon="option.icon" class="text-2xl text-accent"></iconify-icon>
|
|
<span class="text-sm font-bold text-zinc-800">{{ option.label }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<p class="text-xs text-zinc-500">
|
|
Current: <span class="font-bold capitalize">{{ selectedTheme }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const selectedTheme = ref('system')
|
|
|
|
const themeOptions = [
|
|
{ value: 'light', label: 'Light', icon: 'lucide:sun' },
|
|
{ value: 'dark', label: 'Dark', icon: 'lucide:moon' },
|
|
{ value: 'system', label: 'System', icon: 'lucide:monitor' },
|
|
]
|
|
|
|
onMounted(() => {
|
|
selectedTheme.value = localStorage.getItem('appearance') ?? 'system'
|
|
})
|
|
|
|
function setTheme(value) {
|
|
selectedTheme.value = value
|
|
localStorage.setItem('appearance', value)
|
|
applyTheme(value)
|
|
}
|
|
|
|
function applyTheme(value) {
|
|
const html = document.documentElement
|
|
html.classList.remove('light', 'dark')
|
|
if (value === 'system') {
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
html.classList.add('dark')
|
|
}
|
|
} else {
|
|
html.classList.add(value)
|
|
}
|
|
}
|
|
</script>
|