Consult AS Technology
c77b4c0628
Fase 1 - UI: dark mode, skeletons, toasts Fase 2 - Filtros: avanzados Mi día, búsqueda global Ctrl+K Fase 3 - Datos: export Excel, notas apartados, auditoría Fase 4 - Dashboard: gráficas vendedor + métricas uso Fase 5 - Responsive: tablets optimizadas Fase 6 - PWA: IndexedDB offline, push notifications Backend: 3 tablas nuevas, 6 services, 6 endpoints nuevos 721 API tests + fronts verdes.
33 lines
1006 B
TypeScript
33 lines
1006 B
TypeScript
import { Sun, Moon } from "lucide-react"
|
|
import { useEffect, useState } from "react"
|
|
|
|
function getStoredTheme(): boolean {
|
|
if (typeof window === "undefined") return false
|
|
try {
|
|
const stored = localStorage.getItem("frasa_theme")
|
|
if (stored) return stored === "dark"
|
|
return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false
|
|
} catch {
|
|
return false
|
|
}
|
|
}
|
|
|
|
export default function DarkModeToggle() {
|
|
const [dark, setDark] = useState(getStoredTheme)
|
|
|
|
useEffect(() => {
|
|
document.documentElement.classList.toggle("dark", dark)
|
|
try {
|
|
localStorage.setItem("frasa_theme", dark ? "dark" : "light")
|
|
} catch {
|
|
// localStorage not available (test env)
|
|
}
|
|
}, [dark])
|
|
|
|
return (
|
|
<button onClick={() => setDark(!dark)} className="rounded-lg p-2 text-[#64748B] hover:bg-[#F1F5F9] dark:text-[#94A3B8] dark:hover:bg-[#1E293B]" aria-label="Cambiar tema">
|
|
{dark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
|
|
</button>
|
|
)
|
|
}
|