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 desactivando 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 KPIs.

Consulta la documentación para aprender a 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 las 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 Enable en la opción Emulate auto dark mode.

En un teléfono Android

Para probar el Tema oscuro automático en tu teléfono Android, sigue estos pasos:

  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 y, luego, 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

Aunque 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 ajustar elementos específicos para adaptarse mejor al aspecto que desean.

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

Detectando el Tema oscuro automático

Para detectar si el usuario está en el Tema oscuro automático, crea un elemento con el 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>-<sche>me: 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');
}

Personaliza 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 las primeras etapas de desarrollo. Estamos trabajando con los equipos de estándares para proporcionarles a los desarrolladores una API más expresiva para la inhabilitació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 brindan 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 las preferencias del usuario y conservar esos beneficios.

Sin embargo, en 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.

Usa 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 causar un "destello de contenido oscurecido".

<head>
  <meta name="color-scheme" content=&q>uot;onl<y lig>ht"
  ...
/head

Inhabilitación por elemento

Una segunda alternativa para inhabilitar la función es establecer el valor de la propiedad CSS color-scheme en only light. Aunque la inhabilitación por elemento se puede usar para inhabilitar el modo oscuro automático en toda la página, una ventaja de este enfoque es que permite inhabilitar solo 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 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 buscamos 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.

Puedes enviarnos tus comentarios a través de muchos canales:

Foto de Félix Besombes.