Aprender a crear temas dinámicos con variables CSS. Implementar modo claro/oscuro sin duplicar estilos.
Objetivos
- Aprender a crear temas dinámicos con variables CSS.
- Implementar modo claro/oscuro sin duplicar estilos.
- Usar variables para personalizar colores, tipografía y espaciado.
- Aplicar técnicas de cambio de tema en tiempo real.
🔹 1. Variables globales
Definimos variables en :root para reutilizarlas en todo el proyecto.
css
:root {
--color-fondo: #ffffff;
--color-texto: #000000;
--color-acento: #ff6600;
}
body {
background-color: var(--color-fondo);
color: var(--color-texto);
}
🔹 2. Modo oscuro con variables
css
/* Tema claro */
:root {
--color-fondo: #ffffff;
--color-texto: #000000;
}
/* Tema oscuro */
[data-theme="dark"] {
--color-fondo: #121212;
--color-texto: #f5f5f5;
}
👉 Basta con cambiar el atributo data-theme en el <html> o <body> para alternar entre temas.
🔹 3. Personalización de componentes
css
button {
background-color: var(--color-acento);
color: var(--color-texto);
padding: var(--espaciado, 10px); /* valor por defecto */
}
👉 Puedes definir variables específicas para cada componente y sobreescribirlas según el tema.
🔹 4. Cambio de tema en tiempo real (ejemplo con JavaScript)
js
function toggleTheme() {
const html = document.documentElement;
html.dataset.theme = html.dataset.theme === "dark" ? "light" : "dark";
}
👉 Al pulsar un botón, el atributo data-theme cambia y el CSS aplica automáticamente el nuevo tema.
🔹 5. Buenas prácticas
- Define un set básico de variables (colores, tipografía, espaciado).
- Usa nombres descriptivos (
--color-primario,--font-base). - Evita valores fijos en componentes, siempre usa variables.
- Mantén consistencia entre temas (ej. mismo espaciado, solo cambia colores).
📝 Actividad práctica
- Crea un tema claro y oscuro usando variables CSS.
- Implementa un botón que cambie entre ambos temas.
- Personaliza un componente (ej. tarjeta) con variables para fondo, texto y borde.
Visitas:15