Automatisch donker thema

André Cipriani Bandarra

Chrome 96 introduceert een origin trial voor automatische donkere thema's op Android. Met deze functie past de browser een automatisch gegenereerd donker thema toe op sites met een licht thema als de gebruiker heeft gekozen voor donkere thema's in het besturingssysteem. Gebruikers kunnen zich afmelden voor donkere thema's door de optie uit te zetten op OS-niveau of in een specifieke instelling in Chrome.

Aanmelden voor de origin-proefperiode

Je kunt het algoritme voor donker maken ook aanzetten voor je gebruikers via een origin trial. Zo kunt u testen hoe het automatische donkere thema presteert met betrekking tot uw KPI's.

Ga naar de documentatie voor meer informatie over hoe je een origin trial instelt. Meld je daarna aan voor de origin trial voor AutoDarkMode om een token te krijgen.

Het automatische donkere thema testen op je apparaat

Met DevTools

Zo zet je Automatisch donker thema aan in DevTools:

  1. Klik op het menu met 3 stippen.
  2. Selecteer Meer tools en dan Rendering.
  3. Selecteer Aanzetten bij de optie Automatische donkere modus emuleren.

Op een Android-telefoon

Zo test je het automatische donkere thema op je Android-telefoon:

  1. Ga naar chrome://flags en zet het experiment #darken-websites-checkbox-in-theme-setting aan.
  2. Tik daarna op het menu met 3 stippen, selecteer Instellingen en dan Thema en vink het vakje aan bij Donkere thema's toepassen op sites, indien mogelijk.

Lichte pagina's worden nu donkerder gemaakt op de telefoon.

Aanpassing per element

Hoewel we ernaar streven dat Automatisch donker thema in alle gevallen goede resultaten oplevert, gaven vroege gesprekken met ontwikkelaars aan dat ze specifieke elementen willen aanpassen om beter aan te sluiten bij de gewenste look en feel.

In deze origin trial zijn die aanpassingen mogelijk door JavaScript te gebruiken om te detecteren of de gebruiker het automatische donkere thema gebruikt en daarna de gewenste elementen aan te passen.

Automatisch donker thema herkennen

Als je wilt vaststellen of de gebruiker het automatische donkere thema gebruikt, maak je een element met de background-color ingesteld op canvas en het kleurenschema ingesteld op licht. Als de berekende kleur voor de achtergrond niet wit is (rgb(255, 255, 255)), wordt het automatische donkere thema toegepast op de pagina.

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

Een groot aantal elementen aanpassen

De bovenstaande oplossing is misschien moeilijk te schalen als u een groter aantal elementen wilt aanpassen. Een alternatief is om automatische detectie van het donkere thema te gebruiken om een markeringsklasse toe te voegen aan de hoofdtekst van de 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);

Gebruik daarna CSS om elementen aan te passen:

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

De API voor aanpassing per element bevindt zich nog in een vroege ontwikkelingsfase. We werken samen met de standaardteams om ontwikkelaars een expressievere API voor afmelden te bieden. Je kunt het gesprek volgen in dit GitHub-probleem.

Afmelden voor Automatisch donker thema

Donkere thema's respecteren niet alleen de keuze van de gebruiker op het apparaat, maar bieden ook voordelen voor gebruikers, zoals een langere batterijduur en betere toegankelijkheid. In plaats van je af te melden voor Automatisch donker thema, raden we je sterk aan je eigen beheerde donkere thema te implementeren, zodat je de voorkeur van de gebruiker respecteert en die voordelen behoudt.

Als het niet mogelijk is om je eigen donkere thema te implementeren en het resultaat van Automatisch donker thema niet naar wens is, kun je je afmelden voor de functie.

Een metatag gebruiken

Het eerste alternatief om je af te melden voor Automatisch donker thema is door de volgende metatag toe te voegen aan de kop van je pagina. Het voordeel van de metatag is dat deze voorkomt dat het automatische donkere thema überhaupt wordt toegepast, wat een 'flits van donkere content' kan veroorzaken.

<head>
  <meta name="color-scheme" content=&q>uot;onl<y lig>ht"
  ...
/head

Afmelden per element

Een tweede alternatief voor afmelden is de waarde van de CSS-property color-scheme instellen op only light. Hoewel je de afmelding per element kunt gebruiken om de hele pagina af te melden voor de automatische donkere modus, is een voordeel van deze aanpak dat je alleen specifieke delen van de pagina kunt afmelden:

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

Je kunt deze aanpak nog steeds gebruiken om de hele pagina af te melden voor Automatisch donker thema door het kleurenschema in te stellen voor het element :root:

:root {
  color-scheme: only light;
}

Stuur ons feedback

Automatisch donker thema wordt nog steeds gespecificeerd en we zoeken feedback over alle gebieden van de implementatie: van de resultaten van het verduisteringsalgoritme tot de API's voor ontwikkelaars voor elementaanpassing en afmelding.

Je kunt ons via verschillende kanalen feedback sturen:

Foto door Félix Besombes.