Automatyczny ciemny motyw

André Cipriani Bandarra

W Chrome 96 wprowadzamy okres próbny źródła dla automatycznych ciemnych motywów na Androidzie. Dzięki tej funkcji przeglądarka stosuje automatycznie wygenerowany ciemny motyw do witryn o jasnej tematyce, jeśli użytkownik ma włączone ciemne motywy 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.

Przejdź do dokumentacji, aby dowiedzieć się, jak skonfigurować wersję próbną, a potem 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.

Teraz jasne strony będą przyciemnione na telefonie.

Dostosowywanie na poziomie elementu

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 ramach testowania origin te dostosowania są możliwe dzięki JavaScriptowi, który wykrywa, czy użytkownik korzysta z automatycznego ciemnego motywu, a następnie 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 równą 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 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ć funkcji automatycznego wykrywania ciemnego motywu, by 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 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żna wdrożyć własnego ciemnego motywu i efekt wygenerowany przez automatyczny ciemny motyw nie jest zadowalają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ć „migotowanie 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 umożliwia wyłączenie tylko niektórych 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. Aby to zrobić, ustaw schemat kolorów dla elementu :root:

:root {
  color-scheme: only light;
}

Wyślij do nas opinię.

Tryb ciemny jest jeszcze w trakcie określania, dlatego czekamy na opinie we wszystkich obszarach implementacji: od wyników algorytmu przyciemniania po interfejsy API deweloperskie, które umożliwiają dostosowanie elementów i rezygnację z wyświetlania.

Opinie można przesyłać na kilka różnych kanałów:

Zdjęcie: Félix Besombes.