big refactor

app/components/account/AccountThemeSection.vue

@@ -1,20 +1,27 @@
 <script setup lang="ts">
-import type { AppThemeId } from '~/types/app-theme'
+const colorMode = useColorMode()
+const isDark = computed({
+  get () {
+    return colorMode.value === 'dark'
+  },
+  set () {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
 
-const { themeId, themeOptions, applyTheme } = useAppTheme()
+const themeOptions = [
+  { id: 'light', label: 'Light', description: 'Clean and bright interface' },
+  { id: 'dark', label: 'Dark', description: 'Easy on the eyes in low light' },
+]
 
 const themeGradients: Record<string, string> = {
   light: 'from-sky-100 via-blue-50 to-indigo-100',
-  purple: 'from-violet-100 via-fuchsia-50 to-purple-100',
   dark: 'from-slate-700 via-slate-800 to-slate-900',
-  'dark-purple': 'from-violet-900 via-purple-950 to-slate-900'
 }
 
 const themeIcons: Record<string, string> = {
   light: 'i-heroicons-sun',
-  purple: 'i-heroicons-sparkles',
-  dark: 'i-heroicons-moon',
-  'dark-purple': 'i-heroicons-star'
+  dark: 'i-heroicons-moon'
 }
 </script>
 
@@ -34,15 +41,15 @@ const themeIcons: Record<string, string> = {
         :key="opt.id"
         type="button"
         class="app-theme-card text-left"
-        :class="themeId === opt.id ? 'app-theme-card-selected' : ''"
-        @click="applyTheme(opt.id as AppThemeId)"
+        :class="colorMode === opt.id ? 'app-theme-card-selected' : ''"
+        @click="colorMode.preference = opt.id"
       >
         <!-- Header -->
         <div class="flex items-start justify-between gap-3">
           <div class="flex items-center gap-2.5">
             <div
               class="flex h-8 w-8 items-center justify-center rounded-lg"
-              :class="themeId === opt.id ? 'bg-[var(--brand-soft)] text-[var(--brand)]' : 'bg-[var(--badge-muted-bg)] text-[var(--text-muted)]'"
+              :class="colorMode === opt.id ? 'bg-[var(--brand-soft)] text-[var(--brand)]' : 'bg-[var(--badge-muted-bg)] text-[var(--text-muted)]'"
             >
               <UIcon :name="themeIcons[opt.id]" class="h-4 w-4" />
             </div>
@@ -60,7 +67,7 @@ const themeIcons: Record<string, string> = {
             leave-to-class="opacity-0 scale-75"
           >
             <UIcon
-              v-if="themeId === opt.id"
+              v-if="colorMode === opt.id"
               name="i-heroicons-check-circle-solid"
               class="h-6 w-6 shrink-0 text-[var(--brand)]"
             />
@@ -76,7 +83,7 @@ const themeIcons: Record<string, string> = {
         <!-- Component preview (scoped to this theme) -->
         <div
           class="mt-3 rounded-lg border border-[var(--sidebar-border)] bg-[var(--page-bg)] p-3"
-          :data-theme="opt.id"
+          :class="opt.id === 'dark' ? 'dark' : ''"
         >
           <div class="space-y-3">
             <!-- Buttons row -->
@@ -119,7 +126,9 @@ const themeIcons: Record<string, string> = {
           <p>
             Theme applies instantly to all pages including sidebar navigation, cards, inputs, buttons, badges, and KPI panels.
             You can also quickly switch themes from the
-            <UIcon name="i-heroicons-swatch" class="inline h-3.5 w-3.5" />
+            <UIcon name="i-heroicons-sun" class="inline h-3.5 w-3.5" />
+            /
+            <UIcon name="i-heroicons-moon" class="inline h-3.5 w-3.5" />
             icon in the top bar.
           </p>
         </div>
@@ -127,3 +136,27 @@ const themeIcons: Record<string, string> = {
     </div>
   </div>
 </template>
+
+<style scoped>
+.app-theme-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--card-border);
+  background: var(--surface);
+  transition: all 0.15s ease;
+  cursor: pointer;
+}
+
+.app-theme-card:hover {
+  border-color: rgba(1, 105, 111, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.app-theme-card-selected {
+  border-color: var(--brand);
+  background: rgba(1, 105, 111, 0.02);
+}
+</style>