Tema oscuro automático

André Cipriani Bandarra

Chrome 96 presenta una prueba de origen para 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 el tema oscuro en el sistema operativo. Para inhabilitar los temas oscuros, los usuarios pueden inhabilitar la opción en el nivel del SO o en un parámetro de configuración específico de Chrome.

Registrarse para la prueba de origen

También puedes habilitar el algoritmo de oscurecimiento para tus usuarios mediante una prueba de origen. De esta manera, podrás probar el rendimiento del Tema oscuro automático en relación con tus KPIs.

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

Prueba el Tema oscuro automático en tu dispositivo

Con Herramientas para desarrolladores

Para habilitar el Tema oscuro automático en Herramientas para desarrolladores, 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 Emular el modo oscuro automático.

En un teléfono Android

Para probar el Tema oscuro automático en un 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, luego Tema y marca la casilla Aplicar temas oscuros a los sitios, cuando sea posible.

Ahora las páginas claras se oscurecen 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 conversaciones iniciales con los desarrolladores sugirieron que les gustaría modificar elementos específicos para adaptarlos mejor a su apariencia deseada.

En esta prueba de origen, esas personalizaciones son posibles con JavaScript para detectar si el usuario usa el Tema oscuro automático y, luego, personalizar los elementos deseados.

Detecta el Tema oscuro automático

Para detectar si el usuario usa 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');
}

Cómo 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 está en etapa temprana de desarrollo. Estamos trabajando con los equipos de estándares para ofrecer a los desarrolladores una API más expresiva que permita la inhabilitación. Puedes seguir la conversación sobre 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 a los usuarios, como mejoras en la duración de la 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 mantener esos beneficios.

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

Cómo usar 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 impide que se aplique el tema oscuro automático, lo que podría provocar un "destellos de contenido oscurecido".

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

Rechazo por elemento

Una segunda alternativa para inhabilitar la función es establecer el valor de la propiedad de CSS color-scheme en only light. Si bien la inhabilitación por elemento se puede utilizar 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 toda la página del Tema oscuro automático configurando 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 esperamos recibir comentarios en todas las áreas de la implementación: desde los resultados del algoritmo de oscurecimiento hasta las APIs de desarrolladores para la personalización y la inhabilitación de elementos.

Existen muchos canales a los que puedes enviar tus comentarios:

Foto de Félix Besombes.