Tema scuro automatico

André Cipriani Bandarra

Chrome 96 introduce una prova delle origini per i Temi scuri automatici su Android. Con questa funzionalità, il browser applica un tema scuro generato automaticamente ai siti con tema chiaro, quando 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.

Registrati per la 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 in relazione ai tuoi KPI.

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

Testa il tema scuro automatico sul tuo dispositivo

Con DevTools

Per attivare il tema scuro automatico in DevTools:

  1. Fai clic sul menu con tre puntini.
  2. Seleziona Altri strumenti, quindi 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. Dopodiché tocca il menu con tre puntini, seleziona Impostazioni, quindi Tema e seleziona la casella con Applica temi scuri ai siti, se possibile.

Ora, le pagine chiare saranno oscurate sullo smartphone.

Personalizzazione per elemento

Anche se il nostro obiettivo è che il tema scuro automatico generi buoni risultati in tutti i casi, le prime conversazioni con gli sviluppatori hanno suggerito loro di voler modificare elementi specifici per adattarsi meglio all'aspetto e al design desiderati.

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

Rilevamento del tema scuro automatico in corso...

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

<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 descritta sopra può essere difficile da scalare se devi personalizzare un numero maggiore di elementi. Un'alternativa è utilizzare il rilevamento automatico del tema scuro per aggiungere una classe di indicatori 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 il 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. Stiamo collaborando con i team addetti agli 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 dispositivo, i temi scuri offrono vantaggi come miglioramenti della durata della batteria e accessibilità. Invece di disattivare il tema scuro automatico, ti consigliamo vivamente di implementare un tema scuro personalizzato, per rispettare le preferenze dell'utente e conservare i vantaggi.

Tuttavia, nel caso in cui non sia possibile implementare il tuo tema scuro e il risultato generato dal tema scuro automatico non sia soddisfacente, puoi disattivare la 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 del tutto l'applicazione del tema scuro automatico, il 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 è impostare il valore della proprietà CSS color-scheme su only light. Anche se la disattivazione per singolo elemento può essere utilizzata per disattivare la modalità Buio automatico per l'intera pagina, il vantaggio di questo approccio è che consente di disattivare solo parti specifiche della pagina:

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

Puoi comunque 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 su tutte le aree dell'implementazione: dai risultati dell'algoritmo di oscuramento alle API degli sviluppatori per la personalizzazione degli elementi e la disattivazione.

Puoi inviarci il tuo feedback in molti canali:

Foto di Félix Besombes.