From 83809cd4f3bd55d3eb2923c531df870ac034a80b Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Sat, 11 Apr 2026 13:13:09 +0100
Subject: [PATCH] feat: add Appearance settings view with light/dark/system
 theme toggle

---
 .../views/dashboard/settings/Appearance.vue   | 62 ++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/resources/js/views/dashboard/settings/Appearance.vue b/resources/js/views/dashboard/settings/Appearance.vue
index 0ada1d8..0fad679 100644
--- a/resources/js/views/dashboard/settings/Appearance.vue
+++ b/resources/js/views/dashboard/settings/Appearance.vue
@@ -1 +1,61 @@
-<template><div></div></template>
+<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>