Automatyczny ciemny motyw

André Cipriani Bandarra

W Chrome 96 wprowadziliśmy testowanie origin automatycznych ciemnych motywów na Androidzie. Dzięki tej funkcji przeglądarka stosuje automatycznie wygenerowany ciemny motyw do witryn z jasnym motywem, gdy użytkownik włączył ciemny motyw w systemie operacyjnym. Użytkownicy mogą zrezygnować z ciemnych motywów, wyłączając tę opcję na poziomie systemu operacyjnego lub w określonym ustawieniu w Chrome.

Rejestracja w testowaniu origin

Możesz też włączyć algorytm przyciemniania dla użytkowników w ramach testowania origin. Dzięki temu możesz sprawdzić, jak automatyczny tryb ciemny wpływa na Twoje wskaźniki KPI.

Zapoznaj się z dokumentacją, aby dowiedzieć się, jak skonfigurować testowanie origin, a następnie zarejestruj się w testowaniu origin AutoDarkMode, aby uzyskać token.

Testowanie automatycznego ciemnego motywu na urządzeniu

Z Narzędziami deweloperskimi

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

  1. Kliknij menu z 3 kropkami.
  2. Kliknij kolejno Więcej narzędzi i Renderowanie.
  3. Wybierz Włącz w opcji Emuluj automatyczny tryb ciemny.

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, a potem Motyw i zaznacz pole Stosuj ciemne motywy w witrynach, gdy jest to możliwe.

Teraz jasne strony będą przyciemniane na telefonie.

Dostosowywanie poszczególnych elementów

Chociaż dążymy do tego, aby automatyczny ciemny motyw zawsze generował dobre wyniki, pierwsze rozmowy z deweloperami sugerowały, że chcieliby oni dostosować określone elementy, aby lepiej dopasować je do pożądanego wyglądu i stylu.

W ramach tego testowania origin te dostosowania są możliwe dzięki użyciu JavaScriptu do wykrywania, czy użytkownik korzysta z automatycznego ciemnego motywu, a następnie dostosowywania wybranych elementów.

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)), na stronie zostanie zastosowany automatyczny ciemny motyw.

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

Dostosowywanie dużej liczby elementów

Powyższe rozwiązanie może być trudne do skalowania, jeśli chcesz dostosować większą liczbę elementów. Inną opcją jest użycie wykrywania automatycznego 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 użyj CSS, aby dostosować elementy zgodnie z potrzebami:

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

Interfejs API do dostosowywania poszczególnych elementów jest nadal na wczesnym etapie rozwoju. Współpracujemy z zespołami ds. standardów, aby udostępnić deweloperom bardziej ekspresyjny interfejs API do rezygnacji. Możesz śledzić rozmowę na temat tego problemu na GitHubie.

Jak zrezygnować z automatycznego ciemnego motywu

Oprócz poszanowania wyboru użytkownika na jego urządzeniu ciemne motywy zapewniają użytkownikom korzyści, takie jak dłuższy czas pracy na baterii i ułatwienia dostępu. Zamiast rezygnować z automatycznego ciemnego motywu, zdecydowanie zalecamy wdrożenie własnego, starannie dobranego ciemnego motywu, aby uszanować preferencje użytkownika i zachować te korzyści.

Jeśli jednak nie możesz wdrożyć własnego ciemnego motywu, a wynik wygenerowany przez automatyczny ciemny motyw nie jest zadowalający, możesz zrezygnować z tej funkcji.

Używanie metatagu

Pierwszym sposobem na rezygnację z automatycznego ciemnego motywu jest dodanie do nagłówka strony tego metatagu. Zaletą używania metatagu jest to, że zapobiega on stosowaniu automatycznego ciemnego motywu, co mogłoby spowodować „mignięcie przyciemnionej treści”.

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

Rezygnacja z poszczególnych elementów

Innym sposobem na rezygnację jest ustawienie wartości właściwości CSS color-scheme na only light. Chociaż rezygnacja z automatycznego trybu ciemnego na poziomie elementu może służyć do wyłączenia go na całej stronie, zaletą tego podejścia jest to, że pozwala ono na wyłączenie go tylko w określonych częściach strony:

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

Nadal można użyć tego podejścia, aby 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ę.

Automatyczny ciemny motyw jest nadal rozwijany. Chętnie poznamy Twoją opinię na temat wszystkich aspektów jego implementacji: od wyników algorytmu przyciemniania po interfejsy API dla deweloperów umożliwiające dostosowywanie elementów i rezygnację z funkcji.

Możesz przesłać opinię na wiele sposobów:

Autor zdjęcia: Félix Besombes.