josedario87
01139f4415
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 54s
- Implementar sistema de tema día/noche con persistencia en localStorage - Crear componente AnimatedBackground con paisajes SVG animados - Generar todos los assets SVG desde cero (sol, luna, estrellas, nubes, montañas) - Añadir animaciones suaves para nubes, estrellas y elementos del paisaje - Rediseñar UserHeader como componente principal clickeable - Integrar modal de edición de perfil en el header - Reorganizar layout principal mostrando solo aplicaciones - Mejorar diseño de ApplicationsList con glassmorphism - Implementar efectos hover y transiciones elegantes - Diseño responsive mobile-first - Diferencias visuales notorias entre modo día y noche
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
/**
|
|
* Composable para manejar el tema día/noche
|
|
* Persiste la preferencia del usuario en localStorage
|
|
*/
|
|
|
|
export type Theme = 'day' | 'night'
|
|
|
|
export const useTheme = () => {
|
|
// Estado del tema con persistencia
|
|
const currentTheme = useState<Theme>('theme', () => {
|
|
if (import.meta.client && typeof window !== 'undefined') {
|
|
const saved = localStorage.getItem('theme')
|
|
if (saved === 'day' || saved === 'night') {
|
|
return saved
|
|
}
|
|
// Detectar preferencia del sistema
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
return prefersDark ? 'night' : 'day'
|
|
}
|
|
return 'day'
|
|
})
|
|
|
|
// Computed para saber si es modo noche
|
|
const isNight = computed(() => currentTheme.value === 'night')
|
|
|
|
// Alternar tema
|
|
const toggleTheme = () => {
|
|
currentTheme.value = currentTheme.value === 'day' ? 'night' : 'day'
|
|
if (import.meta.client && typeof window !== 'undefined') {
|
|
localStorage.setItem('theme', currentTheme.value)
|
|
}
|
|
}
|
|
|
|
// Establecer tema específico
|
|
const setTheme = (theme: Theme) => {
|
|
currentTheme.value = theme
|
|
if (import.meta.client && typeof window !== 'undefined') {
|
|
localStorage.setItem('theme', theme)
|
|
}
|
|
}
|
|
|
|
return {
|
|
currentTheme: readonly(currentTheme),
|
|
isNight,
|
|
toggleTheme,
|
|
setTheme
|
|
}
|
|
}
|