Automatyczny ciemny motyw

André Cipriani Bandarra

W Chrome 96 wprowadzamy testowanie origin automatycznych ciemnych motywów na Androidzie. Dzięki tej funkcji przeglądarka stosuje automatycznie wygenerowany ciemny motyw do stron 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 wersji próbnej origin

Możesz też włączyć algorytm przyciemniania dla użytkowników za pomocą próbnego przesyłania. Dzięki temu możesz sprawdzić, jak działa automatyczny tryb ciemny w odniesieniu do Twoich wskaźników KPI.

Przeczytaj dokumentację, aby dowiedzieć się, jak skonfigurować wersję próbną, a następnie zarejestruj się w ramach wersji próbnej AutoDarkMode, aby uzyskać token.

Testowanie automatycznego ciemnego motywu na urządzeniu

W Narzędziach deweloperskich

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

  1. Kliknij menu z 3 kropkami.
  2. Kliknij kolejno Więcej narzędzi i Renderowanie.
  3. W opcji 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, a następnie Motyw i zaznacz pole Stosuj ciemny motyw witryn tam, gdzie to możliwe.

Jasne strony będą teraz przyciemniane na telefonie.

Dostosowywanie poszczególnych elementów

Chociaż naszym celem jest to, aby automatyczny tryb ciemny dawał dobre wyniki w każdym przypadku, w pierwszych rozmowach z deweloperami okazało się, że chcieliby oni dostosować niektóre elementy, aby lepiej dopasować wygląd i wygodę do swoich potrzeb.

W tej wersji próbnej te funkcje są możliwe dzięki temu, że JavaScript wykrywa, czy użytkownik korzysta z automatycznego ciemnego motywu, a potem dostosowuje odpowiednie elementy.

Wykrywanie automatycznego ciemnego motywu

Aby wykryć, czy użytkownik korzysta z automatycznego ciemnego motywu, utwórz element z wartością background-color canvas, a schemat kolorów ustaw na jasny. Jeśli obliczony kolor tła jest inny niż biały (rgb(255, 255, 255)), na stronie jest stosowany 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

Jeśli chcesz dostosować większą liczbę elementów, może być trudno zastosować powyższe rozwiązanie. Możesz też użyć wykrywania automatycznego ciemnego motywu, aby dodać klasę znacznika do korpusu 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 personalizacji poszczególnych elementów jest nadal w fazie wstępnej. Współpracujemy z zespołami ds. standardów, aby zapewnić deweloperom bardziej zaawansowane interfejsy API do rezygnacji z usług. Możesz śledzić rozmowę na tym wątku na GitHubie.

Jak zrezygnować z automatycznego ciemnego motywu

Oprócz poszanowania wyboru użytkownika na urządzeniu ciemny motyw zapewnia użytkownikom korzyści takie jak dłuższy czas pracy baterii i ułatwienia dostępu. Zamiast rezygnować z automatycznego ciemnego motywu, zdecydowanie zalecamy wdrożenie własnego ciemnego motywu, aby zachować preferencje użytkownika i osiągnąć korzyści z ciemnego motywu.

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

Za pomocą metatagu

Pierwszą opcją wyłączenia automatycznego ciemnego motywu jest dodanie do nagłówka strony podanego niżej metatagu. Zaletą korzystania z metatagu jest to, że uniemożliwia on stosowanie automatycznego ciemnego motywu, co mogłoby powodować „migotanie ciemnych treści”.

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

Rezygnacja z użycia elementu

Drugą opcją rezygnacji jest ustawienie wartości właściwości color-scheme w kodzie CSS na only light. Chociaż wyłączenie na poziomie elementu może służyć do wyłączenia automatycznego trybu ciemnego na całej stronie, zaletą tego podejścia jest to, że pozwala wyłączyć tylko określone części strony:

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

Nadal możesz użyć tego podejścia, aby wyłączyć automatyczny ciemny motyw na całej stronie. W tym celu ustaw schemat kolorów dla elementu :root:

:root {
  color-scheme: only light;
}

Wyślij do nas opinię.

Automatyczny ciemny motyw jest nadal określany, i chcielibyśmy poznać opinie na temat wszystkich obszarów jego implementacji: od wyników algorytmu ciemnego motywu po interfejsy API dla deweloperów umożliwiające dostosowywanie elementów i rezygnację z tego motywu.

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

Zdjęcie: Félix Besombes.