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 ai siti con temi chiari un tema scuro generato automaticamente, Quando l'utente attiva 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 le prestazioni del tema scuro automatico in relazione ai tuoi KPI.

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

Prova 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 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 si scuriranno sul telefono.

Personalizzazione per elemento

Anche se puntiamo a utilizzare il tema scuro automatico per generare buoni risultati in tutti i casi, le prime conversazioni con gli sviluppatori hanno suggerito di 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 utilizza il tema scuro automatico e quindi personalizzando gli elementi desiderati.

Rilevamento automatico del tema scuro in corso...

Per rilevare se l'utente ha il tema scuro automatico: crea un elemento con background-color impostato su canvas e lo schema di colori impostato su luce. Se il colore calcolato per lo sfondo è diverso dal bianco (rgb(255, 255, 255)), e poi applicare alla pagina 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. In alternativa, puoi 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 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 dedicati 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 suo dispositivo, i temi scuri offrono vantaggi agli utenti, quali miglioramenti della durata della batteria e accessibilità. Invece di disattivare il tema scuro automatico, ti consigliamo di implementare il tuo tema scuro personalizzato, per rispettare le preferenze dell'utente e conservare tali vantaggi.

Tuttavia, nel caso in cui non sia possibile implementare il tema scuro, e il risultato generato dal Tema scuro automatico non è soddisfacente, è possibile 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 del tutto 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 alla disattivazione è l'impostazione del valore dell'attributo color-scheme. proprietà CSS a only light. Anche se la disattivazione per singolo elemento può essere utilizzata per disattivare la modalità Buio automatica dell'intera pagina, 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 escludere l'intera pagina dal tema scuro automatico impostando la combinazione di colori sull'elemento :root:

:root {
  color-scheme: only light;
}

Inviateci un feedback.

È ancora in corso la specifica del tema scuro automatico, e vorremmo ricevere feedback in tutte le aree dell'implementazione: dai risultati dell'algoritmo di oscuramento alle API per sviluppatori per la personalizzazione degli elementi e la loro disattivazione.

Esistono molti canali su cui puoi inviarci il tuo feedback:

Foto di Félix Besombes.