lightdarky
Alterna fácilmente entre temas claro y oscuro en cualquier proyecto web usando JavaScript puro.
Instalación
pnpm add lightdarky
npm install lightdarky
yarn add lightdarky
Uso básico
- Agrega un botón en tu HTML:
<button id="theme-btn" aria-label="light">🌗</button>
- Inicializa el togle en tu código:
import { initThemeToggle } from "lightdarky";
initThemeToggle();
Esto habilita el cambio de tema al hacer clic en el botón con id theme-btn y sincroniza el tema con las preferencias del sistema y el almacenamiento local.
Opciones avanzadas
Puedes personalizar el selector del botón y el esquema por defecto:
initThemeToggle({
buttonSelector: "#mi-boton-tema",
defaultScheme: "dark"
});
Alternar el tema manualmente
La función retorna un método para alternar el tema desde tu código:
const toggle = initThemeToggle();
toggle();
Accesibilidad y buenas prácticas
- El atributo
aria-label del botón se actualiza automáticamente.
- El color de fondo se sincroniza con la meta
theme-color para una mejor integración en dispositivos móviles.
Licencia
MIT