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-[#e5ded7] space-y-5">
|
|
<h2 class="text-lg font-black text-[#4a3f3b]">Appearance</h2>
|
|
<p class="text-sm text-[#89726c]">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-[#bb5b3e] bg-[#faf6f3]'
|
|
: 'border-[#e5ded7] hover:border-[#89726c]'"
|
|
>
|
|
<iconify-icon :icon="option.icon" class="text-2xl text-[#bb5b3e]"></iconify-icon>
|
|
<span class="text-sm font-bold text-[#4a3f3b]">{{ option.label }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<p class="text-xs text-[#89726c]">
|
|
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>
|