Chrome 96 introduce una prova dell'origine per i temi scuri automatici 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:
- Fai clic sul menu con tre puntini.
- Seleziona Altri strumenti e poi Rendering.
- Seleziona Attiva nell'opzione Emula modalità Buio automatica.
Su uno smartphone Android
Per testare il tema scuro automatico sul tuo smartphone Android:
- Vai a
chrome://flags
e attiva l'esperimento#darken-websites-checkbox-in-theme-setting
. - Quindi, tocca il menu con tre puntini, seleziona Impostazioni, poi Tema e seleziona la casella Applica i temi scuri ai siti, se possibile.
Ora le pagine chiare verranno scurite 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 che vorrebbero modificare elementi specifici, per adattarsi meglio al look and feel 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 utilizza il tema scuro automatico,
crea un elemento con background-color
impostato su canvas
e la combinazione di colori impostata su chiara.
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);
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 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, se non è possibile implementare un tema scuro personalizzato e il risultato generato dal tema scuro automatico non è soddisfacente, è possibile disattivare la funzionalità.
Utilizzare 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 elemento può essere utilizzata per disattivare la modalità Buio automatica per l'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 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 di implementazione: dai risultati dell'algoritmo di oscuramento alle API per sviluppatori per la personalizzazione e la disattivazione degli elementi.
Esistono molti canali attraverso i quali puoi inviarci il tuo feedback:
- Tramite il sondaggio per gli sviluppatori.
- Segnala un bug nel progetto Chromium.
- Tramite il modulo di feedback sulla prova di Origin.
Foto di Félix Besombes.