Ver el código de «Tema oscuro usando CSS»

En los últimos años, el modo oscuro se ha convertido en una parte integral del diseño web moderno. No solo reduce la fatiga visual al trabajar en condiciones de poca luz, sino que también ahorra batería en dispositivos con pantallas OLED. Implementar un tema oscuro en un sitio web usando CSS es bastante simple, pero es importante hacerlo correctamente para que los usuarios puedan cambiar fácilmente entre las versiones clara y oscura.

== Principios Básicos del Trabajo con Temas ==
Los temas oscuros y claros son dos conjuntos de estilos que se pueden aplicar dinámicamente a los elementos del sitio web. Idealmente, se debe dar a los usuarios la opción de elegir qué tema usar, pero también se pueden tener en cuenta las preferencias del sistema operativo.

Hay dos formas principales de implementar un tema oscuro:

* Usar variables CSS y cambiar estilos mediante JavaScript
* Aplicar automáticamente el tema según la configuración del sistema usando <code>prefers-color-scheme</code>

Ambos enfoques se pueden combinar para hacer que el manejo de temas sea más flexible.

== Uso de Variables CSS para Temas ==
Una de las formas más convenientes de implementar un tema oscuro es usando variables CSS (<code>custom properties</code>). Esto facilita la gestión de colores y otros parámetros de estilo.

Primero, creemos variables raíz en <code>:root</code> que se usarán en todo el documento:
<syntaxhighlight lang="css" copy>
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

.dark-theme {
    --bg-color: #121212;
    --text-color: #ffffff;
}
</syntaxhighlight>
Luego, aplicamos estas variables a los elementos de la página:
<syntaxhighlight lang="css" copy>
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}
</syntaxhighlight>
Ahora, simplemente agregue la clase <code>.dark-theme</code> a <code><html></code> o <code><body></code> para cambiar los colores.

== Cambiar Temas con JavaScript ==
Para permitir que los usuarios cambien entre temas claros y oscuros, puede usar JavaScript:
<syntaxhighlight lang="javascript" copy>
const toggleThemeBtn = document.getElementById('theme-toggle');

toggleThemeBtn.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark-theme');

    // Guardar la elección del usuario en localStorage
    if (document.documentElement.classList.contains('dark-theme')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

// Verificar la configuración guardada cuando se carga la página
if (localStorage.getItem('theme') === 'dark') {
    document.documentElement.classList.add('dark-theme');
}
</syntaxhighlight>
De esta manera, la elección del usuario se conserva después de recargar la página.

== Detección Automática del Tema del Sistema ==
Si desea respetar la configuración del sistema del usuario, puede usar <code>prefers-color-scheme</code>. Esta media query aplica automáticamente el tema apropiado:
<syntaxhighlight lang="css" copy>
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #ffffff;
    }
}
</syntaxhighlight>
Este método es conveniente porque adapta inmediatamente el sitio web a las preferencias del sistema. Sin embargo, si el usuario desea seleccionar manualmente un tema, deberá combinar este enfoque con JavaScript.

== Combinando Detección Automática y Selección Manual ==
Para tener en cuenta ambos métodos, primero puede verificar si hay una elección de tema guardada en <code>localStorage</code>. Si no, aplique la configuración del sistema:
<syntaxhighlight lang="javascript" copy>
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

if (userTheme) {
    document.documentElement.classList.toggle('dark-theme', userTheme === 'dark');
} else {
    document.documentElement.classList.toggle('dark-theme', systemTheme === 'dark');
}
</syntaxhighlight>

== Creando un Interruptor Fácil de Usar ==
Ahora, agreguemos un botón de cambio de tema en HTML:
<syntaxhighlight lang="html" copy>
<button id="theme-toggle">Cambiar Tema</button>
</syntaxhighlight>
El botón permite que el usuario cambie manualmente el tema, y la lógica para guardar la elección hace que la interacción sea conveniente.

== Mejorando las Animaciones de Transición ==
Para hacer que el cambio de tema se vea suave, puede agregar una animación:
<syntaxhighlight lang="css" copy>
* {
    transition: background-color 0.3s, color 0.3s;
}
</syntaxhighlight>
Esto crea un efecto suave de atenuación o iluminación al cambiar temas.

== Ejemplo de Cambio de Tema Claro y Oscuro ==
{{Iframe
|url = https://codeeditor.ru/code.php?id=2502AUUwBzN5Vw&lang=es
|altura = 500px
|nombre = Tema oscuro usando CSS
}}

== Conclusión ==
Implementar un tema oscuro en un sitio web usando CSS y JavaScript es una tarea relativamente simple pero importante. El uso de variables CSS hace que el código sea conveniente y escalable, mientras que la combinación de <code>prefers-color-scheme</code> y <code>localStorage</code> brinda flexibilidad a los usuarios en sus elecciones. Como resultado, el sitio web será adaptable y cómodo de usar en cualquier condición de iluminación.

==Artículos Relacionados de CSS==
{{Encyclopedia CSS/Navigation}}
{{Navigation/CSS}}
[[Category:CSS]]
[[wj-ru:Темная тема с использованием CSS]]
[[wj-de:Dunkles Design mit CSS]]
[[wj-fr:Thème sombre avec CSS]]
[[wj-en:Dark Theme using CSS]]
[[wj-it:Tema scuro con CSS]]