Agregado toggle light/dark en header

- Composables/useTheme.ts con VueUse (useDark + useToggle) - Persiste preferencia en localStorage ('alpha-theme') - Botón ghost size=icon en el header con iconos sol/luna - Toggle class 'dark' en <html>
2026-05-22 23:01:17 -05:00
parent 28856e2149
commit ef11820194
2 changed files with 30 additions and 0 deletions
@@ -4,11 +4,13 @@ import { useAuthStore } from '@/stores/auth'
 import { useProjectsStore } from '@/stores/projects'
 import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
 import { Separator } from '@/components/ui/separator'
+import { Button } from '@/components/ui/button'
 import AppSidebar from '@/components/AppSidebar.vue'
 import LoginView from '@/views/LoginView.vue'
 import DashboardView from '@/views/DashboardView.vue'
 import CalendarView from '@/views/CalendarView.vue'
 import SchedulerView from '@/views/SchedulerView.vue'
+import { isDark, toggleTheme } from '@/composables/useTheme'

 const auth = useAuthStore()
 const projectsStore = useProjectsStore()
@@ -48,6 +50,23 @@ onMounted(() => {
          <h1 class="text-base font-medium">
            {{ tabTitles[activeTab] }}
          </h1>
+          <div class="ml-auto flex items-center gap-2">
+            <Button variant="ghost" size="icon" class="size-8" @click="toggleTheme()">
+              <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-[18px]">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+                <path d="M12 3l0 18" />
+                <path d="M12 9l4.65 -4.65" />
+                <path d="M12 14.3l7.37 -7.37" />
+                <path d="M12 19.6l8.85 -8.85" />
+              </svg>
+              <svg v-else xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-[18px]">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
+              </svg>
+              <span class="sr-only">Toggle theme</span>
+            </Button>
+          </div>
        </div>
      </header>

@@ -0,0 +1,11 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+export const isDark = useDark({
+  selector: 'html',
+  attribute: 'class',
+  valueDark: 'dark',
+  valueLight: 'light',
+  storageKey: 'alpha-theme',
+})
+
+export const toggleTheme = useToggle(isDark)