Tema oscuro automático

André Cipriani Bandarra

Chrome 96 presenta una prueba de origen para los temas oscuros automáticos en Android. Con esta función, el navegador aplica un tema oscuro generado automáticamente a los sitios con tema claro cuando el usuario habilita los temas oscuros en el sistema operativo. Los usuarios pueden inhabilitar los temas oscuros. Para ello, deben inhabilitar la opción a nivel del SO o en un parámetro de configuración específico de Chrome.

Regístrate para la prueba de origen

También puedes habilitar el algoritmo de oscurecimiento para tus usuarios a través de una prueba de origen. Esto te permite probar el rendimiento del tema oscuro automático en relación con tus KPI.

Ve a la documentación para aprender cómo configurar una prueba de origen y, luego, regístrate en la prueba de origen de AutoDarkMode para obtener un token.

Cómo probar el Tema oscuro automático en tu dispositivo

Con Herramientas para desarrolladores

Para habilitar el Tema oscuro automático en DevTools, haz lo siguiente:

  1. Haz clic en el menú de tres puntos.
  2. Selecciona Más herramientas y, luego, Renderización.
  3. Selecciona Habilitar en la opción Emula el modo oscuro automático.

En un teléfono Android

Para probar el Tema oscuro automático en tu teléfono Android, haz lo siguiente:

  1. Navega a chrome://flags y habilita el experimento #darken-websites-checkbox-in-theme-setting.
  2. Luego, presiona el menú de tres puntos, selecciona Configuración, Tema y marca la casilla Aplicar temas oscuros a los sitios, cuando sea posible.

Ahora, las páginas claras se oscurecerán en el teléfono.

Personalización por elemento

Si bien nuestro objetivo es que el tema oscuro automático genere buenos resultados en todos los casos, las primeras conversaciones con los desarrolladores sugirieron que les gustaría ajustar elementos específicos para adaptarse mejor al aspecto deseado.

En esta prueba de origen, esas personalizaciones son posibles mediante el uso de JavaScript para detectar si el usuario está en el tema oscuro automático y, luego, personalizar los elementos deseados.

Cómo detectar el Tema oscuro automático

Para detectar si el usuario está en el Tema oscuro automático, crea un elemento con background-color establecido en canvas y el esquema de colores establecido en claro. Si el color calculado para el fondo no es blanco (rgb(255, 255, 255)), se aplica el Tema oscuro automático a la página.

<div id="detection"
     style="display: none; background-color: canvas; color-scheme: light">
</div>

const detectionDiv = document.querySelector('#detection');
// If the computed style is not white then the page is in Auto Dark Theme.
const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';
// Update element styles when Auto Dark Theme is applied.
if (isAutoDark) {
  const myElement = document.querySelector('#my-element');
  myElement.classList.add('autoDarkOnlyStyle');
}

Personalizar una gran cantidad de elementos

La solución anterior puede ser difícil de escalar si necesitas personalizar una mayor cantidad de elementos. Una alternativa es usar la detección automática del tema oscuro para agregar una clase de marcador al cuerpo de la página:

function setAutoDarkClass() {
  // We can also use JavaScript to generate the detection element.
  const detectionDiv = document.createElement('div');
  detectionDiv.style.display = 'none';
  detectionDiv.style.backgroundColor = 'canvas';
  detectionDiv.style.colorScheme = 'light';
  document.body.appendChild(detectionDiv);
  // If the computed style is not white then the page is in Auto Dark Theme.
  const isAutoDark = getComputedStyle(detectionDiv).backgroundColor != 'rgb(255, 255, 255)';

  // remove the detection element from the DOM.
  document.body.removeChild(detectionDiv);

  // Set the marker class on the body if in Auto Dark Theme.
  if (isAutoDark) {
    document.body.classList.add('auto-dark-theme');
  }
}
document.addEventListener("DOMContentLoaded", setAutoDarkClass);

Luego, usa CSS para personalizar los elementos según sea necesario:

.auto-dark-theme > #my-element {
  border-color: red;
}

La API de personalización por elemento aún se encuentra en desarrollo inicial. Estamos trabajando con los equipos de estándares para proporcionarles a los desarrolladores una API más expresiva para inhabilitar la opción. Puedes seguir la conversación en este problema de GitHub.

Cómo inhabilitar el Tema oscuro automático

Además de respetar la elección del usuario en su dispositivo, los temas oscuros proporcionan beneficios, como mejoras en la duración de batería y accesibilidad. En lugar de inhabilitar el tema oscuro automático, te recomendamos que implementes tu propio tema oscuro seleccionado para respetar la preferencia del usuario y conservar esos beneficios.

Sin embargo, en el caso de que no sea viable implementar tu propio tema oscuro y el resultado que genera el Tema oscuro automático no sea satisfactorio, puedes inhabilitar la función.

Uso de una metaetiqueta

La primera alternativa para inhabilitar el Tema oscuro automático es agregar la siguiente metaetiqueta al encabezado de tu página. La ventaja de usar la metaetiqueta es que evita que se aplique el Tema oscuro automático, lo que podría provocar un "destello de contenido oscurecido".

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

Inhabilitación por elemento

Una segunda alternativa para inhabilitar la función es configurar el valor de la propiedad de CSS color-scheme en only light. Si bien la inhabilitación por elemento se puede usar para inhabilitar toda la página del modo oscuro automático, una ventaja de este enfoque es que solo permite inhabilitar partes específicas de la página:

#my-element {
  color-scheme: only light;
}

Aún es posible usar este enfoque para inhabilitar el tema oscuro automático en toda la página si configuras el esquema de colores en el elemento :root:

:root {
  color-scheme: only light;
}

Envíanos tus comentarios.

Aún se está especificando el Tema oscuro automático, y estamos buscando comentarios sobre todas las áreas de la implementación: desde los resultados del algoritmo de oscurecimiento hasta las APIs para desarrolladores para la personalización de elementos y la inhabilitación.

Existen muchos canales a los que puedes enviarnos comentarios:

Foto de Félix Besombes.