ricardo/Alpha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Agregado toggle light/dark en header

Browse Source 
- 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>
This commit is contained in:
Ricardo Gonzalez
2026-05-22 23:01:17 -05:00
parent 28856e2149
commit ef11820194
2 changed files with 30 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+19
View File
@@ -4,11 +4,13 @@ import { useAuthStore } from '@/stores/auth'
import { useProjectsStore } from '@/stores/projects' import { useProjectsStore } from '@/stores/projects'
import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar' import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
import { Separator } from '@/components/ui/separator' import { Separator } from '@/components/ui/separator'
import { Button } from '@/components/ui/button'
import AppSidebar from '@/components/AppSidebar.vue' import AppSidebar from '@/components/AppSidebar.vue'
import LoginView from '@/views/LoginView.vue' import LoginView from '@/views/LoginView.vue'
import DashboardView from '@/views/DashboardView.vue' import DashboardView from '@/views/DashboardView.vue'
import CalendarView from '@/views/CalendarView.vue' import CalendarView from '@/views/CalendarView.vue'
import SchedulerView from '@/views/SchedulerView.vue' import SchedulerView from '@/views/SchedulerView.vue'
import { isDark, toggleTheme } from '@/composables/useTheme'
const auth = useAuthStore() const auth = useAuthStore()
const projectsStore = useProjectsStore() const projectsStore = useProjectsStore()
@@ -48,6 +50,23 @@ onMounted(() => {
<h1 class="text-base font-medium"> <h1 class="text-base font-medium">
{{ tabTitles[activeTab] }} {{ tabTitles[activeTab] }}
</h1> </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> </div>
</header> </header>
src/composables/useTheme.ts
+11
View File
@@ -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)