Tema scuro automatico

André Cipriani Bandarra

Chrome 96 introduce un origin trial 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 di Chrome.

Registrati all'origin trial

Puoi anche attivare l'algoritmo di oscuramento per i tuoi utenti tramite un origin trial. In questo modo puoi testare il rendimento del tema scuro automatico in relazione ai tuoi KPI.

Consulta la documentazione per scoprire come configurare un origin trial, quindi registrati all'origin trial AutoDarkMode per ottenere 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. Poi, 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 l'obiettivo del tema scuro automatico è generare buoni risultati in tutti i casi, le prime conversazioni con gli sviluppatori hanno suggerito che vorrebbero modificare elementi specifici, per adattarsi meglio all'aspetto desiderato.

In questa origin trial, queste personalizzazioni sono possibili utilizzando JavaScript per rilevare se l'utente utilizza il tema scuro automatico e quindi personalizzare gli elementi desiderati.

Rilevamento del tema scuro automatico

Per rilevare se l'utente utilizza il tema scuro automatico, crea un elemento con background-color impostato su canvas e la combinazione di colori impostata su Luce. Se il colore calcolato per lo sfondo è 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>-<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');
}

Personalizzazione di un numero elevato di elementi

La soluzione precedente 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);

Poi, 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 iniziale. Stiamo collaborando con i team degli 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 vantaggi agli utenti, come il miglioramento della durata della batteria e l'accessibilità. Anziché disattivare il tema scuro automatico, ti consigliamo vivamente di implementare un tema scuro personalizzato, in modo da rispettare le preferenze dell'utente e mantenere questi vantaggi.

Tuttavia, se non è possibile implementare il tuo tema scuro e il risultato generato dal tema scuro automatico non è soddisfacente, puoi disattivare la funzionalità,

Utilizzo di un meta tag

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

<head>
  <meta name="color-scheme" content=&q>uot;onl<y lig>ht"
  ...
/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 elemento può essere utilizzata per disattivare 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 definizione e stiamo cercando feedback su tutte le aree dell'implementazione: dai risultati dell'algoritmo di oscuramento alle API per gli sviluppatori per la personalizzazione e la disattivazione degli elementi.

Puoi inviarci il tuo feedback tramite diversi canali:

Foto di Félix Besombes.