Tema scuro automatico

André Cipriani Bandarra

Chrome 96 introduce una prova dell'origine per Auto Dark Themes su Android. Con questa funzionalità, il browser applica un tema scuro generato automaticamente ai siti con tema chiaro, se l'utente ha attivato i temi scuri nel sistema operativo. Gli utenti possono disattivare i temi scuri disattivando l'opzione a livello di sistema operativo o in un'impostazione specifica in Chrome.

Registrazione alla prova dell'origine

Puoi anche attivare l'algoritmo di oscuramento per i tuoi utenti tramite una prova dell'origine. In questo modo, puoi testare il rendimento del tema scuro automatico rispetto ai tuoi KPI.

Consulta la documentazione per scoprire come configurare una prova dell'origine, quindi registrati per la prova dell'origine di AutoDarkMode per ricevere un token.

Testare il tema scuro automatico sul dispositivo

Con DevTools

Per attivare il tema scuro automatico in DevTools:

  1. Fai clic sul menu con tre puntini.
  2. Seleziona Altri strumenti e poi Rendering.
  3. Seleziona Attiva nell'opzione Emula modalità Buio automatica.

Su uno smartphone Android

Per testare il tema scuro automatico sul tuo smartphone Android:

  1. Vai a chrome://flags e attiva l'esperimento #darken-websites-checkbox-in-theme-setting.
  2. Quindi, tocca il menu con tre puntini, seleziona Impostazioni, quindi Tema e seleziona la casella Applica temi scuri ai siti, se possibile.

Ora le pagine chiare verranno scurite sullo smartphone.

Personalizzazione per elemento

Anche se puntiamo a utilizzare il tema scuro automatico per generare buoni risultati in tutti i casi, le conversazioni iniziali con gli sviluppatori hanno suggerito che avrebbero voluto modificare elementi specifici per adattarsi meglio all'aspetto desiderato.

In questa prova dell'origine, queste personalizzazioni sono possibili utilizzando JavaScript per rilevare se l'utente è in modalità Tema scuro automatico e poi personalizzando gli elementi desiderati.

Rilevamento del tema scuro automatico

Per rilevare se l'utente ha il tema scuro automatico, crea un elemento con background-color impostato su canvas e la combinazione di colori impostata su chiaro. Se il colore calcolato per lo sfondo è diverso dal bianco (rgb(255, 255, 255)), viene applicato il tema scuro automatico alla pagina.

<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');
}

Personalizzazione di un numero elevato di elementi

La soluzione sopra indicata può essere difficile da scalare se devi personalizzare un numero maggiore di elementi. Un'alternativa è utilizzare il rilevamento automatico del tema scuro per aggiungere un indicatore al corpo della pagina:

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);

Quindi, utilizza CSS per personalizzare gli elementi in base alle tue esigenze:

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

L'API di personalizzazione per elemento è ancora in fase di sviluppo iniziale. Stiamo collaborando con i team di standard per fornire agli sviluppatori un'API più espressiva per la disattivazione. Puoi seguire la conversazione su questo problema di GitHub.

Come disattivare il tema scuro automatico

Oltre a rispettare la scelta dell'utente sul proprio dispositivo, i temi scuri offrono agli utenti vantaggi come miglioramenti della durata della batteria e accessibilità. Anziché disattivare il tema scuro automatico, consigliamo vivamente di implementare un tema scuro personalizzato, per rispettare la preferenza dell'utente e mantenere questi vantaggi.

Tuttavia, nel caso in cui non sia possibile implementare un tema scuro personalizzato e il risultato generato dal tema scuro automatico non sia soddisfacente, puoi disattivare questa funzionalità.

Utilizzo di un meta tag

La prima alternativa per disattivare il tema scuro automatico è aggiungere il seguente meta tag all'intestazione della pagina. Il vantaggio dell'utilizzo del meta tag è che impedisce l'applicazione del tema scuro automatico, che potrebbe causare un "lampo di contenuti scuri".

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

Disattivazione per elemento

Una seconda alternativa per la disattivazione consiste nell'impostare il valore della proprietà CSS color-scheme su only light. Anche se la disattivazione per singolo elemento può essere utilizzata per escludere l'intera pagina dalla modalità Buio automatica, un vantaggio di questo approccio è che consente di disattivare solo parti specifiche della pagina:

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

È comunque possibile utilizzare questo approccio per disattivare il tema scuro automatico per l'intera pagina impostando la combinazione di colori sull'elemento :root:

:root {
  color-scheme: only light;
}

Inviateci un feedback.

Il tema scuro automatico è ancora in fase di specifica e stiamo cercando feedback in tutte le aree dell'implementazione: dai risultati dell'algoritmo di oscuramento alle API per sviluppatori per la personalizzazione e la disattivazione degli elementi.

Esistono molti canali su cui puoi inviarci il tuo feedback:

Foto di Félix Besombes.