Automatisch donker thema

André Cipriani Bandarra

Chrome 96 introduceert een origin-proefversie voor Auto Dark Themes op Android. Met deze functie past de browser een automatisch gegenereerd donker thema toe op sites met een licht thema, wanneer de gebruiker zich heeft aangemeld voor donkere thema's in het besturingssysteem. Gebruikers kunnen zich afmelden voor donkere thema's door de optie uit te schakelen op besturingssysteemniveau of in een specifieke instelling in Chrome.

Meld u aan voor de origin-proefperiode

U kunt het verduisteringsalgoritme ook inschakelen voor uw gebruikers via een origin-proefperiode. Hiermee kunt u testen hoe het Auto Dark Theme presteert met betrekking tot uw KPI's.

Ga naar de documentatie om te leren hoe u een origin-proefversie instelt en meld u vervolgens aan voor de AutoDarkMode origin-proefversie om een ​​token te krijgen.

Test Auto Dark Theme op uw apparaat

Met DevTools

Om Auto Dark Theme in DevTools in te schakelen:

  1. Klik op het menu met de drie stippen.
  2. Selecteer Meer tools en vervolgens Renderen .
  3. Selecteer Inschakelen bij de optie Automatische donkere modus emuleren .

Op een Android-telefoon

Om Auto Dark Theme op uw Android-telefoon te testen:

  1. Navigeer naar chrome://flags en schakel het experiment #darken-websites-checkbox-in-theme-setting .
  2. Tik vervolgens op het menu met de drie stippen, selecteer Instellingen en vervolgens Thema en vink het vakje aan met Pas donkere thema's toe op sites, indien mogelijk .

Nu worden lichte pagina's op de telefoon donkerder gemaakt.

Maatwerk per element

Hoewel we ernaar streven dat Auto Dark Theme in alle gevallen goede resultaten zal opleveren, suggereerden vroege gesprekken met ontwikkelaars dat ze specifieke elementen graag zouden willen aanpassen, om ze beter aan te passen aan hun gewenste uiterlijk en gevoel.

In deze origin-proefversie zijn deze aanpassingen mogelijk door JavaScript te gebruiken om te detecteren of de gebruiker zich in Auto Dark Theme bevindt en vervolgens de gewenste elementen aan te passen.

Auto donker thema detecteren

Om te detecteren of de gebruiker zich in het Auto Dark Theme bevindt, maakt u een element waarvan de background-color is ingesteld op canvas en het kleurenschema is ingesteld op licht. Als de berekende kleur voor de achtergrond anders is dan wit ( rgb(255, 255, 255) ), wordt Auto Dark Theme op de pagina toegepast. 

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

Een groot aantal elementen aanpassen

De bovenstaande oplossing kan moeilijk schaalbaar zijn als u een groter aantal elementen moet aanpassen. Een alternatief is om Auto Dark Theme-detectie te gebruiken om een ​​markerklasse aan de hoofdtekst van de pagina toe te voegen:

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 vervolgens CSS om elementen naar wens aan te passen:

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

De aanpassings-API per element bevindt zich nog in de vroege ontwikkeling. We werken samen met de standaardteams om ontwikkelaars te voorzien van een expressievere API voor opt-out. Je kunt het gesprek over dit GitHub-probleem volgen.

Hoe u zich kunt afmelden voor Auto Dark Theme

Naast het respecteren van de keuze van de gebruiker op zijn apparaat, bieden donkere thema's voordelen voor gebruikers, zoals verbeteringen in de levensduur van de batterij en toegankelijkheid. In plaats van u af te melden voor Auto Dark Theme, raden we u ten zeerste aan om in plaats daarvan uw eigen samengestelde donkere thema te implementeren, om de voorkeur van de gebruiker te respecteren en deze voordelen te behouden.

In het geval dat het echter niet haalbaar is om uw eigen donkere thema te implementeren en het resultaat van Auto Dark Theme niet bevredigend is, kunt u zich afmelden voor de functie.

Een metatag gebruiken

Het eerste alternatief om u af te melden voor Auto Dark Theme is door de volgende metatag aan de kop van uw pagina toe te voegen. Het voordeel van het gebruik van de metatag is dat Auto Dark Theme helemaal niet kan worden toegepast, wat een "flits van verdonkerde inhoud" zou kunnen veroorzaken. 

<head>
  <meta name="color-scheme" content="only light">
  ...
</head>

Per element opt-out

Een tweede alternatief voor het afmelden is het instellen van de waarde van de CSS color-scheme op only light . Hoewel de opt-out per element kan worden gebruikt om de hele pagina uit te schakelen van de Auto Dark-modus, is een voordeel van deze aanpak dat alleen specifieke delen van de pagina kunnen worden afgemeld:

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

Het is nog steeds mogelijk om deze aanpak te gebruiken om de hele pagina af te melden voor Auto Dark Theme door het kleurenschema in te stellen op het :root -element: 

:root {
  color-scheme: only light;
}

Stuur ons feedback!

Auto Dark Theme wordt nog gespecificeerd en we zijn op zoek naar feedback op alle gebieden van de implementatie: van de resultaten van het verduisteringsalgoritme tot de ontwikkelaars-API's voor elementaanpassing en opt-out.

Er zijn veel kanalen waarop u ons uw feedback kunt sturen:

Foto door Félix Besombes .