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 generowany ciemny motyw do witryn o jasnej tematyce, gdy użytkownik włączył 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 w Chrome.

Zarejestruj się, aby wypróbować origin

Możesz też włączyć algorytm przyciemniania na potrzeby użytkowników w ramach testowania origin. Pozwoli Ci to sprawdzić skuteczność automatycznego ciemnego motywu pod kątem Twoich wskaźników KPI.

Aby dowiedzieć się więcej, zapoznaj się z dokumentacją jak skonfigurować wersję próbną origin, a następnie zarejestruj się do testowania origin AutoDarkMode aby otrzymać 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 kolejno Więcej narzędzi i Renderowanie.
  3. Kliknij Włącz przy opcji Emuluj automatyczny tryb ciemny.

Na telefonie z Androidem

Aby przetestować automatyczny ciemny motyw na telefonie z Androidem:

  1. Przejdź do sekcji 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 W miarę możliwości stosuj ciemne motywy do witryn.

Teraz jasne strony będą przyciemnione na telefonie.

Dostosowywanie na poziomie elementu

Staramy się, aby automatyczny ciemny motyw generował dobre wyniki we wszystkich przypadkach, podczas pierwszych rozmów z deweloperami sugerowano, że chcieliby ulepszyć określone elementy, aby lepiej dostosować do własnego wyglądu i stylu.

W tym teście origin Takie 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 sprawdzić, czy użytkownik korzysta z automatycznego ciemnego motywu: 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)): po czym 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

Powyższe rozwiązanie może być trudne do przeskalowania, jeśli musisz dostosować większą liczbę elementów. 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 za pomocą CSS dostosuj elementy do swoich potrzeb:

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

Interfejs API do dostosowywania poszczególnych elementów jest wciąż na wczesnym etapie rozwoju. Współpracujemy z zespołami ds. standardów nad udostępnieniem deweloperom bardziej przejrzystego interfejsu API umożliwiającego rezygnację. Możesz obserwować rozmowę na temat tego problemu na GitHubie.

Jak zrezygnować z automatycznego ciemnego motywu

Poza szanowaniem wyboru użytkownika dotyczącego urządzenia ciemne motywy są przydatne dla użytkowników, np. wydłużają czas pracy na baterii i ułatwiają dostępność. Zamiast zrezygnować z automatycznego ciemnego motywu, zalecamy wdrożenie własnego ciemnego motywu, aby uszanować preferencje użytkownika i zachować korzyści.

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

Za pomocą tagu meta

Aby zrezygnować z automatycznego ciemnego motywu, możesz dodać następujący metatag do nagłówka strony. Zaletą tego tagu jest to, że w ogóle zapobiega stosowaniu automatycznego ciemnego motywu, co może wywołać „rozbłysk przyciemnionych treści”.

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

Rezygnacja z poszczególnych elementów

Możesz też ustawić wartość parametru color-scheme, aby to zrobić. właściwość CSS do only light. Mimo że rezygnację z poszczególnych elementów strony można użyć do wyłączenia Zaletą tego podejścia jest to, że umożliwia ono wyłączenie tylko określonych części strony:

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

Nadal możesz zastosować tę metodę, 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ę.

Nadal określam automatyczny ciemny motyw. i czekamy na opinie dotyczące wszystkich obszarów jej wdrażania: od wyników algorytmu przyciemniania po interfejsy API dla programistów, które pozwalają dostosować elementy i zrezygnować.

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

Zdjęcie: Félix Besombes.