¿Como programar el modo oscuro con solo css?
Vamos a empezar con la forma mas sencilla y automática usando solo CSS.
Primero vamos a entender lo que vamos a hacer.
Variables
Necesitamos usar variables para que no tengamos que ir por cada elemento cambiando el color. Crearemos variables para el color del texto y el fondo en este ejemplo, pero las variables se deben de crear para todos lo colores que hayan, como por ejemplo: bordes, hover o la barra de scroll.
Para crear variables necesitamos primero una seudoclase :root, esta seudoclase representa el elemento <html> y es idéntico al selector html, excepto que su especificidad es mayor. Esto significa que todas las hojas de estilo conectadas a tu documento html tendrán acceso a estas variables. Esta funcionalidad no solo proporciona consistencia en toda la aplicación, sino que también reduce la probabilidad de errores.
Dentro de :root vamos a crear las variables, estas se declaran con dos guiones al inicio del nombre, por ejemplo —variable-1. Se separan las palabras con un guion para que este mas organizado. Para llamar una variable necesitamos la función var(), entre los paréntesis ponemos el nombre de la función y listo, no tendremos nada mas que hacer.
:root {
--color-texto: #FFFFFF;
--color-fondo: black;
}
body {
color: var(--color-texto);
background-color: var(--color-fondo);
}
La idea de todo esto es poner las variables al principio del documento y si en algún momento necesitamos cambiar el color de la página todo sea mas fácil, pues no tendremos por cada uno de los selectores.
Media queries
Las media queries son una sintaxis especial en CSS que nos permite definir estilos que solo se aplicarán si se cumplen ciertas condiciones. Imagínelas como líneas de código opcionales que solo se mostrarán para ciertos usuarios o dispositivos. Son esenciales para el diseño responsive.
La sintaxis es la siguiente:
@media (max-width: 600px) {
/*Estilos aplicados cuando el ancho es menor o igual a 600px*/
body {
font-size: 16px;
}
}
Básicamente va @media y entre paréntesis la condición que se debe cumplir, cuando sea verdadera se aplicarán los estilos que están entre las llaves.
Condición prefers-color-scheme
La propiedad prefers-color-scheme en CSS se utiliza para detectar si un usuario ha solicitado temas de color claros o oscuros. El usuario indica su preferencia a través de la configuración del sistema operativo (como el modo claro o oscuro) o la configuración del navegador.
Con esta propiedad tenemos dos modos: light(claro) o dark(oscuro). Esto detectara automáticamente que modo debe de tener la página web en relación con el modo claro u oscuro que tenga el usuario. Aquí la sintaxis básica
@media (prefers-color-scheme: light) {
:root {
--color-texto: black;
--color-fondo: white;
}
}
@media (prefers-color-scheme: dark) {
:root {
--color-texto: white;
--color-fondo: black;
}
}
body {
background-color: var(--back-color);
color: var(--text-color);
}
Se usan dos media queries para cada uno de los modos, y se usa el mismo nombre de las variables porque dependiendo del modo los valores remplazaran a los anteriores. Llamamos las variables en body y listo, los colores cambiaran automáticamente dependiendo el modo de navegador del usuario.
Cambia de forma automática
Esta forma hace que se cambie el tema automáticamente dependiendo de la configuración ya sea del sistema o del navegador, pero el usuario no podrá escoger el tema manualmente.