Una guía completa para el modo oscuro en la Web

El modo oscuro ha ganado mucha tracción últimamente. Apple, por ejemplo, ha añadido el modo oscuro a sus sistemas operativos iOS y MacOS. Windows y Google han hecho lo mismo.

Entremos en el modo oscuro en el contexto de los sitios web . Profundizaremos en diferentes opciones y enfoques para implementar un diseño en modo oscuro y las consideraciones técnicas que implican. También abordaremos algunos consejos de diseño a lo largo del camino.

Tabla de contenido

1. Temas alternativos
2. Modo oscuro a nivel del sistema operativo
3. Almacenamiento de las preferencias de un usuario
4. Manejo de estilos de agentes de usuario
5. Combinando enfoques
6. Consideraciones de diseño
7. Modo oscuro en la naturaleza
8. ¿Modo oscuro o sin modo oscuro?

Temas alternativos

El escenario típico es que ya tienes un tema claro para tu sitio y estás interesado en crear una contraparte más oscura. O, incluso si empiezas desde cero, tendrás ambos temas: claro y oscuro. Un tema debe definirse como el predeterminado que los usuarios obtienen en la primera visita, que es el tema ligero en la mayoría de los casos (aunque podemos dejar que el navegador del usuario haga esa elección por nosotros, como veremos). También debería haber una forma de cambiar al otro tema (lo que se puede hacer automáticamente, como también veremos), es decir, el usuario hace clic en un botón y el tema de color cambia.

Existen varios enfoques para hacer esto:

body

// Select the buttonconst btn = document.querySelector('.btn-toggle');// Listen for a click on the buttonbtn.addEventListener('click', function() {  // Then toggle (add/remove) the .dark-theme class to the body  document.body.classList.toggle('dark-theme');  })

body  buttonToggle Dark Mode/button  h1Hey there! This is just a title/h1  pI am just a boring text, existing here solely for the purpose of this demo/p  pAnd I am just another one like the one above me, because two is better than having only one/p  a href="#"I am a link, don't click me!/a/body

body {  color: #222;  background: #fff;}a {  color: #0033cc;}

body {  color: #222;  background: #fff;}a {  color: #0033cc;}
/* Dark Mode styles */body.dark-theme {  color: #eee;  background: #121212;}body.dark-theme a {  color: #809fff;}

/* light-theme.css */
body {  color: #222;  background: #fff;}a {  color: #0033cc;}

/* dark-theme.css */
body {  color: #eee;  background: #121212;}body a {  color: #809fff;}

!DOCTYPE htmlhtmlhead  !-- Light theme stylesheet --  link href="light-theme.css" rel="stylesheet"/head
!-- etc. --
/html

// Select the buttonconst btn = document.querySelector(".btn-toggle");// Select the stylesheet linkconst theme = document.querySelector("#theme-link");// Listen for a click on the buttonbtn.addEventListener("click", function() {  // If the current URL contains "ligh-theme.css"  if (theme.getAttribute("href") == "light-theme.css") {    // ... then switch it to "dark-theme.css"    theme.href = "dark-theme.css";  // Otherwise...  } else {    // ... switch it to "light-theme.css"    theme.href = "light-theme.css";  }});

// Select the buttonconst btn = document.querySelector(".btn-toggle");
// Listen for a click on the buttonbtn.addEventListener("click", function() {  // Then toggle (add/remove) the .dark-theme class to the body  document.body.classList.toggle("dark-theme");});

body {  --text-color: #222;  --bkg-color: #fff;  --anchor-color: #0033cc;}

body.dark-theme {  --text-color: #eee;  --bkg-color: #121212;  --anchor-color: #809fff;}

body {  color: var(--text-color);  background: var(--bkg-color);}a {  color: var(--anchor-color);}

?php$themeClass = '';if (isset($_GET['theme'])  $_GET['theme'] == 'dark') {  $themeClass = 'dark-theme';}
$themeToggle = ($themeClass == 'dark-theme') ? 'light' : 'dark';?!DOCTYPE htmlhtml!-- etc. --body  a href="?theme=?php echo $themeToggle; ?"Toggle Dark Mode/a  !-- etc. --/body/html

?php$themeStyleSheet = 'light-theme.css';if (isset($_GET['theme'])  $_GET['theme'] == 'dark') {  $themeStyleSheet = 'dark-theme.css';}
$themeToggle = ($themeStyleSheet == 'dark-theme.css') ? 'light' : 'dark';?!DOCTYPE htmlhtmlhead  !-- etc. --  link href="?php echo $themeStyleSheet; ?" rel="stylesheet"/head
body  a href="?theme=?php echo $themeToggle; ?"Toggle Dark Mode/a  !-- etc. --/body/html

¿Qué método deberías elegir?

El método “correcto” se reduce a los requisitos de su proyecto. Si está realizando un proyecto grande, por ejemplo, puede optar por propiedades CSS para ayudar a gestionar una base de código grande. Por otro lado, si su proyecto necesita admitir navegadores heredados, será necesario otro enfoque.

Además, no hay nada que diga que solo podemos usar un método. A veces, una combinación de métodos será la ruta más eficaz. Incluso puede haber otros métodos posibles además de los que hemos comentado.

Modo oscuro a nivel del sistema operativo

Hasta ahora, hemos usado un botón para alternar entre el modo claro y oscuro, pero simplemente podemos dejar que el sistema operativo del usuario haga eso por nosotros. Por ejemplo, muchos sistemas operativos permiten a los usuarios elegir entre temas claros y oscuros directamente en la configuración del sistema.

CSS puro

@media (prefers-color-scheme: dark) {  /* Dark theme styles go here */}
@media (prefers-color-scheme: light) {  /* Light theme styles go here */}

@media (prefers-color-scheme: dark) {  body {    color: #eee;    background: #121212;  }
  a {    color: #809fff;  }}

javascript

const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');nnif (prefersDarkScheme.matches) {n  document.body.classList.add('dark-theme');n} else {n  document.body.classList.remove('dark-theme');n}

Anular la configuración del sistema operativo

Acabamos de ver cómo tener en cuenta las preferencias de combinación de colores de todo el sistema de un usuario. Pero, ¿qué pasa si los usuarios quieren anular la preferencia del sistema por un sitio? El hecho de que un usuario prefiera el modo oscuro para su sistema operativo no siempre significa que lo prefiera en un sitio web. Es por eso que es una buena idea proporcionar una forma de anular manualmente el modo oscuro, a pesar de la configuración del sistema.

/* Default colors */body {  --text-color: #222;  --bkg-color: #fff;}/* Dark theme colors */body.dark-theme {  --text-color: #eee;  --bkg-color: #121212;}/* Styles for users who prefer dark mode at the OS level */@media (prefers-color-scheme: dark) {  /* defaults to dark theme */  body {     --text-color: #eee;    --bkg-color: #121212;  }  /* Override dark mode with light mode styles if the user decides to swap */  body.light-theme {    --text-color: #222;    --bkg-color: #fff;  }}

// Listen for a click on the button btn.addEventListener("click", function() {  // If the OS is set to dark mode...  if (prefersDarkScheme.matches) {    // ...then apply the .light-theme class to override those styles    document.body.classList.toggle("light-theme");    // Otherwise...  } else {    // ...apply the .dark-theme class to override the default light styles    document.body.classList.toggle("dark-theme");  }});

Soporte del navegador

La prefers-color-schemefunción de consulta de medios es compatible con los principales navegadores, incluidos Chrome 76+, Firefox 67+, Chrome Android 76+, Safari 12.5+ (13+ en iOS) y Samsung Internet Browser. No es compatible con IE.

¡Esa es una cantidad prometedora de apoyo! Can I Use estima el 80,85% de cobertura de usuarios.

Los sistemas operativos que actualmente admiten el modo oscuro incluyen MacOS (Mojave o posterior), iOS (13.0+), Windows (10+) y Android (10+).

Almacenamiento de la preferencia de un usuario

Lo que hemos visto hasta ahora definitivamente hace lo que dice: intercambiar temas según la preferencia del sistema operativo o el clic de un botón. Esto es fantástico, pero no se conserva cuando el usuario visita otra página del sitio o recarga la página actual.

Necesitamos guardar la elección del usuario para que se aplique de manera consistente en todo el sitio y en visitas posteriores. Para hacer eso, podemos guardar la elección del usuario cuando localStoragese cambia el tema. Las cookies también son adecuadas para este trabajo.

Veamos ambos enfoques.

Uso del almacenamiento local

Tenemos un script que guarda el tema seleccionado en localStorage cuando se realiza el cambio. En otras palabras, cuando se recarga la página, el script recupera la elección localStoragey la aplicación. JavaScript a menudo se ejecuta después de CSS, por lo que este enfoque es propenso a un “destello de tema incorrecto” (FOIT) .

// Select the buttonconst btn = document.querySelector(".btn-toggle");// Select the theme preference from localStorageconst currentTheme = localStorage.getItem("theme");
// If the current theme in localStorage is "dark"...if (currentTheme == "dark") {  // ...then use the .dark-theme class  document.body.classList.add("dark-theme");}
// Listen for a click on the button btn.addEventListener("click", function() {  // Toggle the .dark-theme class on each click  document.body.classList.toggle("dark-theme");    // Let's say the theme is equal to light  let theme = "light";  // If the body contains the .dark-theme class...  if (document.body.classList.contains("dark-theme")) {    // ...then let's make the theme dark    theme = "dark";  }  // Then save the choice in localStorage  localStorage.setItem("theme", theme);});

Uso de cookies con PHP

Para evitar FLIC, podemos utilizar un script del lado del servidor como PHP. En lugar de guardar la preferencia de tema del usuario en localStorage, crearemos una cookie desde JavaScript y la guardaremos allí. Pero nuevamente, esto sólo puede ser factible si ya estás trabajando con un lenguaje del lado del servidor.

// Select the buttonconst btn = document.querySelector(".btn-toggle");
// Listen for a click on the button btn.addEventListener("click", function() {  // Toggle the .dark-theme class on the body  document.body.classList.toggle("dark-theme");    // Let's say the theme is equal to light  let theme = "light";  // If the body contains the .dark-theme class...  if (document.body.classList.contains("dark-theme")) {    // ...then let's make the theme dark    theme = "dark";  }  // Then save the choice in a cookie  document.cookie = "theme=" + theme;});

?php$themeClass = '';if (!empty($_COOKIE['theme'])  $_COOKIE['theme'] == 'dark') {  $themeClass = 'dark-theme';}?
!DOCTYPE htmlhtml!-- etc. --body!-- etc. --/body/html

?php$themeStyleSheet = 'light-theme.css';if (!empty($_COOKIE['theme'])  $_COOKIE['theme'] == 'dark') {  $themeStyleSheet = 'dark-theme.css';}?
!DOCTYPE htmlhtmlhead  !-- etc. --  link href="?php echo $themeStyleSheet; ?" rel="stylesheet"/head!-- etc. --

?php// Login actionif (!empty($_POST['login'])) {  // etc.
  // If the uuser is authenticated...  if ($loginSuccess) {    // ... save their theme preference to a session variable    $_SESSION['user_theme'] = $userData['theme'];  }}
// Pick the session variable first if it's set; otherwise pick the cookie$themeChoice = $_SESSION['user_theme'] ?? $_COOKIE['theme'] ?? null;$themeClass = '';if ($themeChoice == 'dark') {  $themeClass = 'dark-theme';}?
!DOCTYPE htmlhtml!-- etc. --body!-- etc. --/body/html

Manejo de estilos de agentes de usuario

Para informar a la hoja de estilo UA del navegador sobre las preferencias de combinación de colores del sistema y decirle qué combinaciones de colores son compatibles con la página, podemos usar la color-schememetaetiqueta.

Por ejemplo, digamos que la página debe admitir temas “oscuros” y “claros”. Podemos poner ambos como valores en la metaetiqueta, separados por espacios. Si solo queremos admitir un tema “ligero”, entonces solo necesitamos usar “ligero” como valor. Esto se analiza en una edición de GitHub del CSSWG, donde se propuso originalmente.

meta name="color-scheme" content="dark light"

Cuando se agrega esta metaetiqueta, el navegador tiene en cuenta las preferencias de combinación de colores del usuario al representar elementos de la página controlados por UA (como un button). Representa colores para el fondo raíz, controles de formulario y funciones de revisión ortográfica (así como cualquier otro estilo controlado por UA) según las preferencias del usuario.

Aunque en su mayor parte los temas tienen estilos manuales (lo que anula los estilos UA), informar al navegador sobre los temas admitidos ayuda a evitar incluso la más mínima posibilidad de una posible situación FOIT. Esto es cierto para aquellas ocasiones en las que HTML se ha renderizado pero CSS todavía está esperando para cargarse.

También podemos configurar esto en CSS:

:root {  color-scheme: light dark; /* both supported */}

En el momento de escribir este artículo, la color-schemepropiedad carece de compatibilidad amplia con navegadores, aunque tanto Safari como Chrome la admiten.

Combinando todas las cosas!

Combinamos todo y creemos una demostración funcional que:

1. Carga automáticamente un tema oscuro o claro según las preferencias del sistema
2. Permite al usuario anular manualmente su preferencia del sistema.
3. Mantiene el tema preferido del usuario en las recargas de la página.

Uso de JavaScript y almacenamiento local

// Select the buttonconst btn = document.querySelector(".btn-toggle");// Check for dark mode preference at the OS levelconst prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
// Get the user's theme preference from local storage, if it's availableconst currentTheme = localStorage.getItem("theme");// If the user's preference in localStorage is dark...if (currentTheme == "dark") {  // ...let's toggle the .dark-theme class on the body  document.body.classList.toggle("dark-mode");// Otherwise, if the user's preference in localStorage is light...} else if (currentTheme == "light") {  // ...let's toggle the .light-theme class on the body  document.body.classList.toggle("light-mode");}
// Listen for a click on the button btn.addEventListener("click", function() {  // If the user's OS setting is dark and matches our .dark-mode class...  if (prefersDarkScheme.matches) {    // ...then toggle the light mode class    document.body.classList.toggle("light-mode");    // ...but use .dark-mode if the .light-mode class is already on the body,    var theme = document.body.classList.contains("light-mode") ? "light" : "dark";  } else {    // Otherwise, let's do the same thing, but for .dark-mode    document.body.classList.toggle("dark-mode");    var theme = document.body.classList.contains("dark-mode") ? "dark" : "light";  }  // Finally, let's save the current preference to localStorage to keep using it  localStorage.setItem("theme", theme);});

Uso de PHP y cookies

?php$themeClass = '';if (!empty($_COOKIE['theme'])) {  if ($_COOKIE['theme'] == 'dark') {    $themeClass = 'dark-theme';  } else if ($_COOKIE['theme'] == 'light') {    $themeClass = 'light-theme';  }  }?
!DOCTYPE htmlhtml!-- etc. --body!-- etc. --script  const btn = document.querySelector(".btn-toggle");  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");    btn.addEventListener("click", function() {    if (prefersDarkScheme.matches) {      document.body.classList.toggle("light-mode");      var theme = document.body.classList.contains("light-mode") ? "light" : "dark";    } else {      document.body.classList.toggle("dark-mode");      var theme = document.body.classList.contains("dark-mode") ? "dark" : "light";    }    document.cookie = "theme=" + theme;  });/script/body/html

Consideraciones de diseño

A menudo escuchamos que implementar el modo oscuro es más fácil que diseñar uno. Si bien me abstendré de juzgar, veamos algunas consideraciones para diseñar un tema oscuro.

Ya conoces la tarea básica: cambiar los valores de color más claros por otros más oscuros y viceversa. Pero hay algunos elementos y mejoras de la interfaz de usuario que tienen más matices y requieren más atención. Echemos un vistazo a esos.

Imágenes en modo oscuro

Una buena regla es disminuir un poco el brillo y el contraste de las imágenes para que parezcan cómodas a la vista cuando están sobre un fondo oscuro. Una imagen súper brillante sobre un fondo súper oscuro puede resultar discordante y atenuar la imagen reduciendo parte de ese fuerte contraste.

La filter()función CSS es más que capaz de manejar esto por nosotros:

/* Apply the filter directly on the body tag */body.dark-theme img {  filter: brightness(.8) contrast(1.2);}
/* Or apply it via media query */@media (prefers-color-scheme: dark) {  img {    filter: brightness(.8) contrast(1.2);  }}

Podemos hacer el mismo tipo de cosas directamente en el marcado usando el pictureelemento para cargar diferentes versiones de una imagen:

picture  !-- Use this image if the user's OS setting is light or unset --  source media="(prefers-color-scheme: light) or (prefers-color-scheme: no-preference)"  !-- Use this image if the user's OS setting is dark --  source media="(prefers-color-scheme: dark)"/picture

La desventaja aquí es que requiere proporcionar dos archivos, mientras que solo tenemos que manejar uno cuando usamos CSS. Esto tampoco tiene en cuenta por completo que el usuario alterna el tema de color en el sitio.

Sombras en modo oscuro

Las sombras en modo oscuro son complicadas. Si simplemente invertimos una sombra oscura usando colores claros, obtenemos esta cosa original con una sombra clara sobre un fondo oscuro… y no tiene una buena apariencia.

Es posible utilizar una sombra oscura en el modo oscuro, pero el color de fondo debe ser lo suficientemente “claro” (como un gris oscuro) para proporcionar suficiente contraste para ver realmente la sombra.

Al implementar el modo oscuro, no desperdicies las señales visuales de la versión clara invirtiendo ingenuamente la combinación de colores.

Los elementos cercanos deberían ser más claros y los elementos distantes deberían ser más oscuros, incluso en una interfaz de usuario oscura. pic.twitter.com/RNxgIppDmn

- Steve Schoger (@steveschoger) 16 de julio de 2019

Utilice la opacidad para transmitir profundidad; las regiones de alta opacidad tienen una profundidad más baja. Es decir, los elementos que tienen una mayor elevación deberían tener una opacidad menor que los elementos que están “más cerca” en profundidad del fondo.

Tipografía en modo oscuro

El truco aquí es muy parecido a las imágenes: tenemos que equilibrar el contraste. Si utilizamos una fuente demasiado pesada obtenemos un texto a todo volumen que nos hace querer alejarnos de la pantalla. Si utilizamos una fuente demasiado clara, forzaremos la vista mientras nos acercamos poco a poco a la pantalla para verla más de cerca.

El equilibrio está en algún punto intermedio. Robin tiene un buen artículo donde sugiere un poco de CSS que marca una gran diferencia en la legibilidad.

Iconos del modo oscuro

Los íconos entran en esta categoría "complicada" porque son una especie de cruce entre texto e imágenes. Sin embargo, si trabajamos con íconos SVG, podemos cambiar el relleno con CSS. Por otro lado, si usamos íconos de fuente, simplemente podemos cambiar la propiedad de color.

/* SVG icon */body.dark-theme svg.icon path {  fill: #efefef;}/* Font icon (using Font Awesome as an example) */body.dark-theme .fa {  color: #efefef;}

Muchas de las mismas consideraciones de diseño que son válidas para el texto también se aplican generalmente a los iconos. Por ejemplo, debemos evitar el uso de contornos muy blancos y pesados.

Colores del modo oscuro

El texto en blanco puro sobre un fondo negro puro lucirá discordante. El truco aquí consiste en utilizar un color blanquecino para el texto y negro para el fondo. Las pautas de diseño de materiales, por ejemplo, recomiendan #121212como fondo.

Paletas de colores en modo oscuro

Hemos visto la diferencia que supone el uso de colores blanquecinos y negros para texto e imágenes. Ampliemos esto un poco con consejos sobre cómo desarrollar una paleta de colores completa.

La mayoría de las cosas se reducen a una sola cosa: el contraste . Es por eso que el primer consejo antes de decidirse por cualquier color es pasar las ideas por un verificador de contraste para garantizar que las proporciones de color cumplan con las pautas de WCAG para al menos una clasificación AA, que es una relación de contraste de 4,5:1.

Eso significa que los colores desaturados son nuestros amigos cuando trabajamos con un diseño en modo oscuro. Ayudan a evitar imágenes excesivamente brillantes y aún nos brindan mucho espacio para crear una relación de contraste efectiva.

A continuación, recuerde que los colores de acento están destinados a ser mejoras. Probablemente sean más brillantes que el color de fondo del tema oscuro, por lo que usarlos como color primario o como color de fondo de un contenedor grande es tan discordante y duro para la vista como una imagen brillante o un texto blanco pesado.

Si el contraste es el equilibrio que intentamos lograr, recuerde que el modo oscuro es más que negros y grises. ¿Qué pasa con un fondo azul oscuro con texto en amarillo pálido? ¿O marrón oscuro con tostado? Existe un espectro completo (y creciente) de colores y podemos aprovechar cualquier parte de él para impulsar la creatividad.

Algunos ejemplos de colores oscuros sin recurrir al negro total:

#232B32

#152028