Fix: Sincronizar tema con clase dark de Nuxt UI
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 53s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 53s
- Agregar función applyThemeClass para sincronizar con HTML - Aplicar clase dark/light al elemento HTML - Agregar watcher para actualizar clase en cambios de tema - Inicializar clase correcta en onMounted
This commit is contained in:
@@ -23,6 +23,32 @@ export const useTheme = () => {
|
||||
// Computed para saber si es modo noche
|
||||
const isNight = computed(() => currentTheme.value === 'night')
|
||||
|
||||
// Función para aplicar la clase dark al HTML
|
||||
const applyThemeClass = (theme: Theme) => {
|
||||
if (import.meta.client && typeof window !== 'undefined') {
|
||||
const html = document.documentElement
|
||||
if (theme === 'night') {
|
||||
html.classList.add('dark')
|
||||
html.classList.remove('light')
|
||||
} else {
|
||||
html.classList.add('light')
|
||||
html.classList.remove('dark')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Aplicar clase inicial al montar
|
||||
if (import.meta.client) {
|
||||
onMounted(() => {
|
||||
applyThemeClass(currentTheme.value)
|
||||
})
|
||||
|
||||
// Sincronizar clase cuando cambie el tema
|
||||
watch(currentTheme, (newTheme) => {
|
||||
applyThemeClass(newTheme)
|
||||
})
|
||||
}
|
||||
|
||||
// Alternar tema
|
||||
const toggleTheme = () => {
|
||||
currentTheme.value = currentTheme.value === 'day' ? 'night' : 'day'
|
||||
|
||||
Reference in New Issue
Block a user