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 temas claros, 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.

Consulta la documentación para obtener más información cómo configurar una prueba de origen 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, sigue estos pasos:

  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 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 retocar elementos específicos, para adaptarse mejor al aspecto deseado.

En esta prueba de origen, es posible realizar esas personalizaciones con JavaScript para detectar si el usuario usa 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á usando el Tema oscuro automático, haz lo siguiente: Crea un elemento con background-color establecido en canvas y el esquema de colores establecido en claro. Si el color calculado para el fondo es distinto del blanco (rgb(255, 255, 255)), y, luego, se aplicará el Tema oscuro automático.

<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 las etapas iniciales de desarrollo. Estamos trabajando con los equipos de estándares para ofrecer a los desarrolladores una API más expresiva que puedan inhabilitar. 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 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 el caso en que no sea viable implementar tu propio tema oscuro, y el resultado que genera el tema oscuro automático no es satisfactorio es posible 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 la 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 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 color-scheme Propiedad de CSS para only light Si bien la inhabilitación por elemento puede utilizarse para inhabilitar el modo oscuro automático de toda la página, 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 especifica el Tema oscuro automático. y esperamos comentarios sobre todas las áreas de la implementación: de los resultados del algoritmo de oscurecimiento a las APIs de desarrollador para la personalización y la inhabilitación de elementos.

Existen muchos canales a los que puedes enviarnos comentarios:

Foto de Félix Besombes