prefers-color-scheme: Witaj ciemności, mój stary przyjacielu

Przesada czy konieczność? Dowiedz się wszystkiego o trybie ciemnym i o tym, jak wspierać go z korzyścią dla użytkowników.

Thomas Steiner

Wprowadzenie

Tryb ciemny przed trybem ciemnym

Tryb ciemny obrócił się dookoła. Na początkach komputerów osobistych nie trzeba było wybierać trybu ciemnego. Ale w rzeczywistości: Monochromatyczne monitory komputerowe CRT, których działanie polegało na uruchomieniu wiązek elektronowych na ekranie fosforzowym, a fosfor użyty we wczesnych urządzeniach CRT miał kolor zielony. Tekst był wyświetlany na zielono, a reszta ekranu była czarna, dlatego modele te często określano jako zielone ekrany.

Później wprowadzenie kolorowych kieszeni CRT wyświetlało się w kilku kolorach. wykorzystując czerwone, zielone i niebieskie fosfory. Wygenerowali białą, aktywując wszystkie 3 fosfory jednocześnie. Wraz z nadejściem bardziej zaawansowanych rozwiązań WYSIWYG publikowanie na komputerze, Powszechnie pojawił się pomysł, dzięki któremu wirtualny dokument przypomina zwykłą kartkę papieru.

To właśnie ciemny kolor na białym zapoczątkował trend wzornictwa, Ten trend został przeniesiony wstępna wersja internetowa oparta na dokumentach. Pierwsza w historii przeglądarka WorldWideWeb (pamiętaj, CSS nie wynaleziono jeszcze). wyświetlono strony internetowe w ten sposób. Ciekawostka: druga przeglądarka, Przeglądarka w trybie liniowym – przeglądarka oparta na terminalu – była na zielono na ciemnym tle. Obecnie strony i aplikacje internetowe zwykle są projektowane z użyciem ciemnego tekstu. na jasnym tle, zgodnie z założeniam bazowym, który jest również zakodowany na stałe w arkuszach stylów klienta użytkownika, Chrome.

Epoka urządzeń CRT już dawno się skończyła. Wykorzystywanie i tworzenie treści częściej niż na urządzeniach mobilnych podświetlane LCD lub energooszczędne ekrany AMOLED. Mniejsze i łatwiejsze w obsłudze komputery, tablety i smartfony doprowadziły do nowych wzorców użytkowania. Zadania rekreacyjne, takie jak przeglądanie internetu, kodowanie dla rozrywki i granie na wysokiej klasy często zdarzają się po godzinach w ciemnym otoczeniu. Użytkownicy chętnie korzystają z urządzeń w łóżku w nocy. Im więcej osób korzysta z urządzeń w ciemności, tym bardziej popularny staje się pomysł powrotu do korzeni świata w ciemności.

Dlaczego tryb ciemny

Tryb ciemny ze względów estetycznych

Gdy ktoś jest pytany dlaczego lubią lub chcą korzystać z trybu ciemnego, najpopularniejszą reakcją jest to, że „miło patrzy w oczy”, a po nim „elegancki i piękny”. Apple w Dokumentacja dla deweloperów korzystających z trybu ciemnego wprost pisze: „Decyzja o tym, czy włączyć wygląd jasny czy ciemny jest estetyczna dla większości użytkowników i może nie mieć związku z oświetleniem otoczenia”.

Tryb ciemny jako narzędzie ułatwień dostępu

Są też osoby, które potrzebują trybu ciemnego i używają go jako dodatkowego narzędzia ułatwień dostępu. np. osoby niedowidzące. Najwcześniejsze wystąpienie tego narzędzia ułatwień dostępu funkcja CloseView w Systemie 7, która miała przełącznik Czarny na białym i Biały na czarnym. Chociaż kolor systemu 7 był obsługiwany, domyślny interfejs był nadal czarno-biały.

Te implementacje oparte na odwróceniu pokazały swoje słabe strony po wprowadzeniu koloru. Badania opinii użytkowników przeprowadzone przez Szpiro i in. na temat jak osoby niedowidzące korzystają z urządzeń cyfrowych pokazują, że wszystkim ankietowanym użytkownikom nie podobają się odwrócone obrazy, ale wiele osób preferowało jasny tekst na ciemnym tle. Firma Apple uwzględnia tę preferencję użytkownika za pomocą funkcji o nazwie Smart Invert odwraca kolory na wyświetlaczu, z wyjątkiem obrazów, multimediów i niektóre aplikacje używające ciemnych kolorów.

Szczególną formą niedowidzenia jest zespół komputerowego rozpoznawania obrazów, znany również jako cyfrowe przeciążenie oczu, zdefiniowano jako „połączenie problemów ze wzrokiem i wzrokiem związanych z korzystaniem z komputera (w tym komputery stacjonarne, laptopy i tablety) oraz inne wyświetlacze elektroniczne (np. smartfonów i elektronicznych czytników). Zaproponowano korzystanie przez nastolatków z urządzeń elektronicznych, zwłaszcza w nocy, zwiększa ryzyko krótszego snu, dłuższy czas oczekiwania na sen i zwiększone niedobory snu. Ponadto ekspozycja na światło niebieskie zgłoszono brać udział w regulacjach rytm dobowy i cykl snu, a nieregularne oświetlenie może powodować braki snu, potencjalnie wpływać na nastrój i wydajność zadań, badań przeprowadzonych przez Rosenfielda. Aby ograniczyć te negatywne skutki, redukcja światła niebieskiego przez dostosowanie temperatury kolorów wyświetlacza za pomocą funkcji takich jak iOS, Night Shift lub funkcja Androida Podświetlenie nocne może Ci pomóc, oraz unikanie jasnego i nieregularnego światła – ciemnego motywu i ciemnych trybów.

Oszczędność energii w trybie ciemnym na ekranach AMOLED

Tryb ciemny pozwala też zaoszczędzić dużo energii, AMOLED. Studia przypadków dotyczące Androida koncentrujące się na popularnych aplikacjach Google takich jak YouTube, pokazało, że oszczędność energii może sięgać nawet 60%. Więcej informacji na temat tych studiów przypadków i oszczędności energii w poszczególnych aplikacjach znajdziesz w filmie poniżej.

Aktywowanie trybu ciemnego w systemie operacyjnym

Teraz, gdy omówiliśmy już powody, dla których tryb ciemny jest tak ważny dla wielu użytkowników, zobaczmy, jak możesz je wspierać.

systemy operacyjne obsługujące tryb ciemny lub ciemny motyw; zwykle jest dostępna opcja aktywacji w ustawieniach. W systemie macOS X znajduje się ona w sekcji Ogólne preferencji systemu i nazywa się Wygląd (zrzut ekranu). a w Windows 10 – w sekcji Kolory pod nazwą Wybierz kolor (zrzut ekranu). W przypadku Androida Q znajdziesz go w sekcji Wyświetlacz jako przełącznik Ciemnego motywu (zrzut ekranu). a w iOS 13 możesz zmienić wyglądw sekcji Wyświetlanie Jasność ustawień (zrzut ekranu).

Zapytanie o multimedia prefers-color-scheme

Ostatnia uwaga teorii, zanim zajdę. Zapytania o multimedia umożliwiać autorom testowanie wartości lub funkcji klienta użytkownika lub urządzenia do wyświetlania i wysyłanie dotyczących ich zapytań, niezależnie od wyświetlanego dokumentu. Są one używane w regule CSS @media do warunkowego stosowania stylów do dokumentu. oraz w różnych innych kontekstach i językach, np. HTML i JavaScript. Zapytania o multimedia – poziom 5 wprowadziliśmy tzw. funkcje multimedialne związane z preferencjami użytkownika. umożliwia witrynom wykrywanie preferowanego sposobu wyświetlania treści przez użytkownika.

prefers-color-scheme funkcja multimediów jest używana do wykrywania jeśli użytkownik ustawił na stronie jasny lub ciemny motyw kolorystyczny. Działa z tymi wartościami:

• light: Wskazuje, że użytkownik powiadomił system, że preferuje stronę z jasnym motywem. (ciemny tekst na jasnym tle).
• dark: Wskazuje, że użytkownik powiadomił system, że preferuje stronę z ciemnym motywem. (jasny tekst na ciemnym tle).

Obsługuje tryb ciemny

Sprawdzanie, czy przeglądarka obsługuje tryb ciemny

Tryb ciemny jest raportowany w odpowiedzi na zapytanie o multimedia, więc możesz łatwo sprawdzić, czy bieżąca przeglądarka obsługuje tryb ciemny, sprawdzając, czy zapytanie o multimedia prefers-color-scheme w ogóle pasuje. Zwróć uwagę, że nie uwzględniam żadnej wartości, ale wystarczy tylko sprawdzić, czy samo zapytanie o media pasuje do zapytania.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

W momencie tworzenia wiadomości usługa prefers-color-scheme jest obsługiwana zarówno na komputerze, jak i na telefonie komórkowym (tam, gdzie jest dostępna) Chrome i Edge od wersji 76, Firefox od wersji 67, i Safari od wersji 12.1 na komputery z systemem macOS i od wersji 13 na iOS. Informacje na temat innych przeglądarek znajdziesz w sekcji Czy mogę korzystać z tabel pomocy.

Uzyskiwanie informacji o ustawieniach użytkownika w momencie żądania

Nagłówek podpowiedzi dla klienta Sec-CH-Prefers-Color-Scheme umożliwia witrynom uzyskiwanie preferencji użytkownika – opcjonalnie na czas jego żądania – co pozwala serwerom na wbudowanie właściwego kodu CSS, a tym samym unikanie błysków o nieprawidłowym motywie kolorystycznym.

Tryb ciemny w praktyce

Na koniec zobaczmy, jak obsługa trybu ciemnego wygląda w praktyce. Tak jak w przypadku Highlander, w trybie ciemnym może być tylko jedna: ciemny lub jasny, ale nie oba jednocześnie. Dlaczego o tym mówię? Ponieważ powinien to mieć wpływ na strategię wczytywania. Nie wymuszaj na użytkownikach pobierania kodu CSS w krytycznej ścieżce renderowania a konkretnie na potrzeby trybu, którego obecnie nie używają. Aby zoptymalizować szybkość ładowania, podzieliłem CSS dla przykładowej aplikacji który pokazuje w praktyce poniższe rekomendacje na 3 części, aby odroczyć mniej ważnego kodu CSS:

• style.css, który zawiera ogólne reguły, które są uniwersalne w witrynie.
• dark.css, który zawiera tylko reguły wymagane w trybie ciemnym.
• light.css, który zawiera tylko reguły wymagane przez tryb jasny.

Strategia wczytywania

Te ostatnie, light.css i dark.css, są ładowane warunkowo za pomocą zapytania <link media>. Początkowo: nie wszystkie przeglądarki obsługują język prefers-color-scheme (wykrywalne na podstawie wzorca powyżej), Zajmuję się dynamicznie, ładując domyślny plik light.css. za pomocą warunkowo wstawionego elementu <link rel="stylesheet"> w pomniejszonym skrypcie w tekście (jasny to wybór swobodny – mogę też ustawić ciemny kolor jako domyślny obraz zastępczy). Aby uniknąć przebłysku niesformatowanych treści, Ukrywam zawartość strony do czasu wczytania strony light.css.

<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
      'beforeend',
      '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">',
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="/light.css"
  media="(prefers-color-scheme: light)"
/>
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css" />

Architektura arkusza stylów

Wykorzystam maksimum zmiennych CSS, dzięki temu mój ogólny style.css będzie a całe dostosowania w trybie jasnym i ciemnym mają miejsce w 2 pozostałych plikach dark.css i light.css. Poniżej znajduje się fragment rzeczywistych stylów, który powinien jednak wystarczający do przedstawienia ogólnego pomysłu. Deklaruję 2 zmienne: -⁠-⁠color i -⁠-⁠background-color co zasadniczo tworzy motyw podstawowy ciemny na jasny i jasny w ciemnym.

/* light.css: 👉 dark-on-light */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}

/* dark.css: 👉 light-on-dark */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
}

W narzędziu style.css użyję tych zmiennych w regule body { … }. Zgodnie z definicją na :root pseudoklasa CSS – selektorem, który w kodzie HTML reprezentuje element <html> i jest taki sam jak selektor html, z tą różnicą, że jego specyfika jest wyższe—spadają kaskadowo, co służy mi do deklarowania globalnych zmiennych CSS.

/* style.css */
:root {
  color-scheme: light dark;
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

W przykładowym kodzie powyżej zauważyłeś pewnie właściwość color-scheme z wartością oddzieloną spacjami light dark.

Informuje przeglądarkę, jakie motywy kolorystyczne obsługuje moja aplikacja i umożliwia aktywowanie specjalnych wariantów arkusza stylów klienta użytkownika, dzięki czemu przeglądarka może np. renderować pola formularza z ciemnym tłem i jasnym tekstem, dostosuj paski przewijania lub włączyć kolor wyróżnienia uwzględniający motyw. Dokładne informacje o miejscu color-scheme są podane w Moduł dostosowania kolorów CSS – poziom 1.

Cała reszta sprowadza się do zdefiniowania zmiennych CSS do ważnych rzeczy w mojej witrynie. Semantyczna porządkowanie stylów bardzo pomaga w pracy w trybie ciemnym. Na przykład zamiast -⁠-⁠highlight-yellow możesz wywoływać zmienną -⁠-⁠accent-color, jako „żółty” może nie być żółty w trybie ciemnym i na odwrót. Poniżej podaliśmy kilka dodatkowych zmiennych, których używam w przykładzie.

/* dark.css */
:root {
  --color: rgb(250, 250, 250);
  --background-color: rgb(5, 5, 5);
  --link-color: rgb(0, 188, 212);
  --main-headline-color: rgb(233, 30, 99);
  --accent-background-color: rgb(0, 188, 212);
  --accent-color: rgb(5, 5, 5);
}

/* light.css */
:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
  --link-color: rgb(0, 0, 238);
  --main-headline-color: rgb(0, 0, 192);
  --accent-background-color: rgb(0, 0, 238);
  --accent-color: rgb(250, 250, 250);
}

Pełny przykład

W tym fragmencie dotyczącym zakłócenia umieszczonego zobaczysz pełny przykład, który pozwala zastosować powyższe koncepcje w praktyce. Spróbuj wyłączyć tryb ciemny w konkretnych ustawieniach systemu operacyjnego i zobaczyć, jak zareaguje strona.

Wczytuję wpływ

Korzystając z tego przykładu, możesz zobaczyć dlaczego ładuję dark.css i light.css za pomocą zapytań o multimedia. Spróbuj wyłączyć tryb ciemny i ponownie załadować stronę: określone obecnie niepasujące arkusze stylów są wciąż wczytywane, ale z najniższym priorytetem – aby nigdy nie rywalizować z zasobami, których potrzebuje obecnie witryna.

Reagowanie na zmiany w trybie ciemnym

Tak jak w przypadku innych zmian zapytań o multimedia, zmiany w trybie ciemnym można subskrybować za pomocą JavaScriptu. Można to użyć np. do dynamicznego zmieniania favikona strony lub zmień <meta name="theme-color">. który określa kolor paska adresu URL w Chrome. W pełnym przykładzie powyżej widać to w praktyce: aby zobaczyć zmiany koloru motywu i favikony, otwórz w oddzielnej karcie.

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', (e) => {
  const darkModeOn = e.matches;
  console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
});

W Chromium 93 i Safari 15 możesz dostosować kolor na podstawie zapytanie o media z atrybutem media elementu koloru motywu meta. zostanie wybrana pierwsza pasująca do zapytania. Możesz na przykład mieć jeden kolor dla: tryb jasny i drugi w trybie ciemnym. Podczas pisania nie możesz i zdefiniować je w pliku manifestu. Zobacz w3c/manifest#975 GitHub .

<meta
  name="theme-color"
  media="(prefers-color-scheme: light)"
  content="white"
/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

Debugowanie i testowanie trybu ciemnego

Emuluję prefers-color-scheme w Narzędziach deweloperskich

Przełączanie schematów kolorystycznych całego systemu operacyjnego może szybko irytować, więc w Narzędziach deweloperskich w Chrome można teraz emulować schemat kolorów preferowany przez użytkownika. w sposób wpływający tylko na aktualnie widoczną kartę. Otwórz menu poleceń, zacznij wpisywać Rendering, uruchom polecenie Show Rendering, a następnie zmień opcję Emuluj funkcję multimediów CSS prefers-color-scheme.

Zrzuty ekranu prefers-color-scheme w Puppeteer

Puppeteer to biblioteka Node.js który zapewnia ogólny interfejs API do kontrolowania Chrome lub Chromium Protokół narzędzi deweloperskich. Dzięki dark-mode-screenshot możesz: skrypt Puppeteer, który pozwala tworzyć zrzuty ekranu stron w trybie ciemnym i jasnym. Możesz uruchomić ten skrypt jednorazowo lub umieścić go Zestaw testów CI (ciągłej integracji).

npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

Sprawdzone metody korzystania z trybu ciemnego

Unikaj czystej bieli

Drobny szczegół, który zauważyliście, to to, że nie używam czystej bieli. Zamiast tego, aby zapobiec pojawianiu się poświaty i krwawienia w otoczeniu ciemnej treści, Wybiorę nieco ciemniejszy biały. Dobrze sprawdza się na przykład rgb(250, 250, 250).

Ponowne kolorowanie i przyciemnianie zdjęć

Jeśli porównasz 2 zrzuty ekranu poniżej, zauważysz, że zmienił się nie tylko główny motyw ciemny w jasnym lub świetlnym w ciemnym kolorze, ale główny obraz też wygląda trochę inaczej. Moje badania opinii użytkowników pokazał, że większość ankietowanych preferują nieco mniej żywe i jasne obrazy w trybie ciemnym. Nazywam to ponownym kolorowaniem.

.

.

Ponowne kolorowanie można uzyskać za pomocą filtra CSS w moich obrazach. Używam selektora arkusza CSS dopasowującego wszystkie obrazy, które nie mają w adresie URL słowa .svg. że mogę zmienić kolor grafiki wektorowej (ikony). niż moje zdjęcia (zdjęcia). Więcej informacji na ten temat znajdziesz w następnym akapicie. Zwróć uwagę na to, że znowu użyję zmiennej CSS, aby móc później elastycznie zmienić filtr.

Ponowne kolorowanie jest potrzebne tylko w trybie ciemnym, czyli gdy dark.css jest aktywny, nie ma odpowiednich reguł w: light.css.

/* dark.css */
--image-filter: grayscale(50%);

img:not([src*='.svg']) {
  filter: var(--image-filter);
}

Dostosowywanie intensywności ponownego kolorowania w trybie ciemnym za pomocą JavaScriptu

Nie wszyscy są tacy sami i każdy użytkownik ma inne potrzeby związane z trybem ciemnym. Trzymając się opisanej powyżej metody zmiany koloru, Mogę łatwo dostosować intensywność szarości do preferencji użytkownika zmianę za pomocą JavaScriptu, Ustawienie wartości 0% pozwala też całkowicie wyłączyć ponowne kolory. Pamiętaj, że document.documentElement zawiera odniesienie do głównego elementu dokumentu, ten sam element, do którego mogę się odnieść :root Pseudoklasa CSS.

const filter = 'grayscale(70%)';
document.documentElement.style.setProperty('--image-filter', value);

Odwróć grafiki i ikony wektorowe

W przypadku grafiki wektorowej, które w moim przypadku są używane jako ikony, do których odwołują się elementy <img> – użyć innej metody kolorowania. Badania pokazują, że ludzie nie lubią odwrócenia zdjęć, ten model sprawdza się w przypadku większości ikon. Tutaj również używam zmiennych CSS do określania wartości inwersji w stanie „zwykłym” i w stanie :hover.

.

.

Pamiętaj, że odwracam ikony tylko w elemencie dark.css, ale nie w light.css, oraz jak odwracam ikony :hover ma różną intensywność intensywności w obu przypadkach, aby ikona się pojawiła nieco ciemniejsze lub nieco jaśniejsze, w zależności od trybu wybranego przez użytkownika.

/* dark.css */
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);

img[src*='.svg'] {
  filter: var(--icon-filter);
}

/* light.css */
--icon-filter_hover: invert(60%);

/* style.css */
img[src*='.svg']:hover {
  filter: var(--icon-filter_hover);
}

Użyj currentColor w przypadku wbudowanych plików SVG

W przypadku wbudowanych obrazów SVG zamiast filtrów inwersji możesz wykorzystać currentColor Słowo kluczowe CSS, które reprezentuje wartość właściwości color elementu. Pozwala to używać wartości color w usługach, które nie otrzymują jej domyślnie. Dla wygody, jeśli jako wartość SVG używana jest currentColor atrybuty fill lub stroke, przyjmuje wartość dziedziczoną z wartości właściwości color [kolor]. Co więcej, działa to też w przypadku <svg><use href="…"></svg> dzięki czemu można mieć i currentColor będą nadal stosowane w kontekście. Pamiętaj, że działa to tylko w przypadku plików SVG wbudowanych lub <use href="…">, , a nie plików SVG, do których odwołuje się src obrazu lub w jakiś sposób za pomocą CSS. Sposób wdrożenia tych zmian widać w poniższej wersji demonstracyjnej.

<!-- Some inline SVG -->
<svg xmlns="http://www.w3.org/2000/svg"
    stroke="currentColor"
>
  […]
</svg>

Płynne przejścia między trybami

Dzięki temu można płynnie przełączać się z trybu ciemnego na jasny lub odwrotnie że zarówno color, jak i background-color są animowanych właściwości CSS. Tworzenie animacji jest proste: wystarczy zadeklarować 2 elementy transition dla każdej z 2 właściwości. Poniższy przykład przedstawia ogólną koncepcję. Narzędzie można wypróbować na żywo w demo.

body {
  --duration: 0.5s;
  --timing: ease;

  color: var(--color);
  background-color: var(--background-color);

  transition: color var(--duration) var(--timing), background-color var(
        --duration
      ) var(--timing);
}

Kierunek sztuki w trybie ciemnym

Ogólnie ze względu na wydajność wczytywania zalecam używanie wyłącznie funkcji prefers-color-scheme w atrybucie media elementów <link> (a nie w tekście w arkuszach stylów); ale czasami warto użyć funkcji prefers-color-scheme bezpośrednio w kodzie HTML. W takim przypadku mamy do czynienia z kierunkiem artystycznym. W internecie kierunki artystyczne określają ogólny wygląd strony i sposób, w jaki się komunikuje, stymuluje nastrój, kontrastuje z czymś i jest atrakcyjny dla odbiorców docelowych.

W trybie ciemnym projektant musi zdecydować, który obraz jest najlepszy w danym trybie. i czy ponowne kolorowanie zdjęć jest nie wystarczająco dobre. Jeśli użyjesz go z elementem <picture>, element <source> obrazu, który ma być wyświetlany, może być zależny od atrybutu media. Na przykładzie poniżej pokazuję półkulę zachodnią w trybie ciemnym i półkulę wschodnią dla trybu jasnego. lub jeśli nie jest to preferowane, we wszystkich innych przypadkach domyślnie ustawiana jest półkula wschodnia. Oczywiście ma to wyłącznie charakter poglądowy. Aby zobaczyć różnicę, włącz na urządzeniu tryb ciemny.

<picture>
  <source srcset="western.webp" media="(prefers-color-scheme: dark)" />
  <source srcset="eastern.webp" media="(prefers-color-scheme: light)" />
  <img src="eastern.webp" />
</picture>

Tryb ciemny, ale z możliwością rezygnacji

Jak wspomnieliśmy powyżej w sekcji Dlaczego tryb ciemny tryb ciemny to estetyczny wybór dla większości użytkowników. W efekcie niektórzy użytkownicy mogą chcieć mieć interfejs systemu operacyjnego, ale nadal wolą oglądać swoje strony internetowe w taki sposób, w jaki są przyzwyczajone. Warto na początku stosować się do sygnałów wysyłanych przez przeglądarkę. prefers-color-scheme, ale opcjonalnie zezwolić użytkownikom na zastępowanie ustawień na poziomie systemu.

Element niestandardowy <dark-mode-toggle>

Możesz oczywiście samodzielnie utworzyć kod, ale możesz też użyć gotowego elementu niestandardowego (komponentu internetowego) utworzonego właśnie w tym celu. Nosi tytuł <dark-mode-toggle> i dodaje przełącznik (tryb ciemny: włączony/wyłączony) lub przełącznik motywów (motyw jasny/ciemny) na stronie, który możesz w pełni dostosować. Prezentacja poniżej pokazuje działanie elementu (a też cicho wciągnęłam go przez wszystkie inny przykłady powyżej).

<dark-mode-toggle
  legend="Theme Switcher"
  appearance="switch"
  dark="Dark"
  light="Light"
  remember="Remember this"
></dark-mode-toggle>

. .

W poniższej prezentacji możesz kliknąć elementy sterujące trybem ciemnym w prawym górnym rogu. Jeśli zaznaczysz pole wyboru w trzecim i czwartym elemencie sterującym, zobacz, jak wybrany tryb jest zapamiętywany nawet po ponownym załadowaniu strony. Dzięki temu użytkownicy mogą pozostawiać system operacyjny w trybie ciemnym, ale wolisz korzystać z niej w trybie jasnym lub na odwrót.

Podsumowanie

Praca z trybem ciemnym i jego wspieranie to świetna zabawa, która otwiera przed Tobą nowe możliwości projektowania. W przypadku niektórych użytkowników może to oznaczać, że nie będą w stanie obsługiwać Twojej strony i żeby być szczęśliwym użytkownikiem. Istnieją pewne pułapki i konieczne jest dokładne testowanie, ale tryb ciemny to świetna okazja, aby pokazać, że dbasz o wszystkich użytkowników. Sprawdzone metody wymienione w tym poście oraz pomocnicy <dark-mode-toggle> element niestandardowy powinien dać Ci pewność, że potrafisz stworzyć niesamowite wrażenia w trybie ciemnym. Daj mi znać na Twitterze, co tworzysz i czy ten post był przydatny a także propozycje ulepszenia. Dziękujemy za uwagę! 🌒

Powiązane artykuły

Zasoby do zapytania o media prefers-color-scheme:

• Strona Stan platformy Chrome
• Błąd Chromium
• Specyfikacja „Zapytania o multimedia” na poziomie 5

Informacje o metatagu color-scheme i właściwości CSS:

• Właściwość CSS color-scheme i metatag
• Strona Stan platformy Chrome
• Błąd Chromium
• Specyfikacja modułu dostosowania kolorów CSS poziomu 1
• Problem z GitHubem CSS WG dotyczący meta tagu i właściwości CSS
• Problem z tagiem HTML WhatWG na GitHubie

Linki do ogólnego trybu ciemnego:

• Material Design – ciemny motyw
• Tryb ciemny w Inspektorze sieci
• Obsługa trybu ciemnego w WebKit
• Wytyczne Apple dotyczące interfejsu człowieka – tryb ciemny

Artykuły na temat badań przygotowawczych do tego posta:

• Co działają w „obsługiwanych schematach kolorów” w trybie ciemnym Naprawdę? 🤔
• Niech zapadnie ciemność! 🌚 Może...
• Ponowna koloryzacja w trybie ciemnym

Podziękowania

funkcję multimediów prefers-color-scheme, właściwość CSS color-scheme, a powiązany metatag to praca dotycząca implementacji 👏 Rune Lillesveen. Rune jest też współedytorem specyfikacji modułu dostosowania kolorów CSS poziomu 1. 🙏 Podziękuję Łukaszowi Zbylutowi, Rowan Merewood Chirag Desai i Rob Dodson . Strategia wczytywania jest pomysłem Jake'a Archibalda. Emilio Cobos Álvarez wskazał mi prawidłową metodę wykrywania prefers-color-scheme. Wskazówka z odwołaniami do plików SVG i obiektu currentColor pochodzi z Timothy Hatcher. Jestem wdzięczna wielu anonimowym uczestnikom różnych badań opinii użytkowników które pomogły kształtować rekomendacje w tym artykule. Baner powitalny: Nathan Anderson.