Automatyczny ciemny motyw

André Cipriani Bandarra

W Chrome 96 wprowadzamy wersję próbną automatycznych ciemnych motywów na Androida. Dzięki tej funkcji przeglądarka stosuje automatycznie wygenerowany ciemny motyw do witryn o jasnej tematyce, jeśli użytkownik wybrał w systemie operacyjnym ciemny motyw. Użytkownicy mogą zrezygnować z ciemnych motywów, wyłączając odpowiednią opcję na poziomie systemu operacyjnego lub w określonym ustawieniu Chrome.

Zarejestruj się, aby skorzystać z wersji próbnej origin

Możesz też włączyć algorytm przyciemniania dla użytkowników, korzystając z testowania origin. Pozwoli Ci to przetestować skuteczność automatycznego ciemnego motywu w odniesieniu do wskaźników KPI.

Otwórz dokumentację, aby dowiedzieć się, jak skonfigurować wersję próbną origin, a potem zarejestruj się w wersji próbnej origin AutoDarkMode, aby uzyskać token.

Przetestuj automatyczny ciemny motyw na urządzeniu

Z narzędziami deweloperskimi

Aby włączyć automatyczny ciemny motyw w Narzędziach deweloperskich:

  1. Kliknij menu z 3 kropkami.
  2. Wybierz Więcej narzędzi, a następnie Renderowanie.
  3. W polu Emuluj automatyczny tryb ciemny wybierz Włącz.

Na telefonie z Androidem

Aby przetestować automatyczny ciemny motyw na telefonie z Androidem:

  1. Otwórz chrome://flags i włącz eksperyment #darken-websites-checkbox-in-theme-setting.
  2. Następnie kliknij menu z 3 kropkami, wybierz Ustawienia i Motyw, a potem zaznacz pole Stosuj ciemne motywy do witryn, jeśli to możliwe.

Teraz jasne strony na telefonie będą przyciemnione.

Dostosowywanie poszczególnych elementów

Chociaż staramy się, by automatyczny tryb ciemny przynosił dobre wyniki we wszystkich przypadkach, już na wczesnym etapie rozmów z deweloperami sugerowaliśmy, że chcieliby zmienić niektóre elementy, aby lepiej dopasować się do ich wyglądu i stylu.

W ramach tego testowania origin JavaScript można było użyć JavaScriptu, aby wykryć, czy użytkownik korzysta z automatycznego ciemnego motywu, a następnie dostosować odpowiednie elementy.

Wykrywanie automatycznego ciemnego motywu

Aby wykryć, czy użytkownik korzysta z automatycznego trybu ciemnego, utwórz element z atrybutem background-color ustawionym na canvas i schematem kolorów ustawionym na jasny. Jeśli obliczony kolor tła jest inny niż biały (rgb(255, 255, 255)), do strony zostanie zastosowany automatyczny ciemny motyw.

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

Dostosowywanie dużej liczby elementów

Skalowanie powyższego rozwiązania może być trudne, jeśli trzeba dostosować większą liczbę elementów. Możesz też użyć automatycznego wykrywania ciemnego motywu, aby dodać klasę znacznika do treści strony:

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

Następnie możesz dostosować elementy za pomocą CSS:

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

Interfejs API dostosowywania według elementów jest nadal na etapie opracowywania. Współpracujemy z zespołami ds. standardów, aby udostępnić deweloperom interfejs API umożliwiający rezygnację z nich. Możesz śledzić tę rozmowę na temat tego problemu w serwisie GitHub.

Jak zrezygnować z automatycznego ciemnego motywu

Oprócz szanowania wyboru użytkownika dotyczącego urządzenia ciemny motyw zapewnia użytkownikom korzyści, takie jak skrócenie czasu pracy na baterii czy ułatwienia dostępu. Zamiast rezygnować z automatycznego ciemnego motywu zdecydowanie zalecamy wdrożenie własnego, wyselekcjonowanego ciemnego motywu, aby uszanować preferencję użytkownika i zachować uzyskane korzyści.

Jeśli jednak wdrożenie ciemnego motywu nie jest możliwe, a wynik automatycznego ciemnego motywu nie jest zadowalający, możesz zrezygnować z tej funkcji.

Korzystanie z metatagu

Pierwszym sposobem na zrezygnowanie z automatycznego ciemnego motywu jest dodanie tego tagu do nagłówka strony. Zaletą metatagów jest to, że zapobiega on używaniu automatycznego ciemnego motywu, co może powodować „przebłysk ciemnego motywu”.

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

Rezygnacja z poszczególnych elementów

Drugą możliwością rezygnacji jest ustawienie wartości właściwości CSS color-scheme na only light. Mimo że możliwość rezygnacji z automatycznego trybu ciemnego dla poszczególnych elementów pozwala zrezygnować z automatycznego trybu ciemnego na całej stronie, jego zaletą jest to, że pozwala to wyłączyć jedynie wybrane części strony:

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

Nadal możesz zrezygnować z automatycznego ciemnego motywu na całej stronie, ustawiając schemat kolorów w elemencie :root:

:root {
  color-scheme: only light;
}

Wyślij do nas opinię.

Nadal pracujemy nad automatycznym ciemnym motywem i prosimy o opinie na temat wszystkich aspektów implementacji: od wyników algorytmu przyciemniania po interfejsy API dla programistów dotyczące dostosowywania elementów i rezygnacji.

Opinię możesz przesłać na wiele sposobów:

Zdjęcie: Félix Besombes.