Ulepszyliśmy domyślny styl trybu ciemnego za pomocą właściwości CSS schematu kolorów i odpowiedniego metatagu.

Właściwość CSS color-scheme i odpowiadający jej tag meta umożliwiają deweloperom dodanie stron do domyślnych ustawień motywu w arkuszu stylów klienta użytkownika.

Thomas Steiner

Tło

Funkcja mediów prefers-color-scheme dotycząca preferencji użytkownika

Funkcja preferencji użytkownika dotycząca multimediów prefers-color-schemepozwala deweloperom uzyskać pełną kontrolę nad wyglądem stron. Jeśli nie znasz tej funkcji, przeczytaj mój artykuł prefers-color-scheme: Cześć ciemności, mój stary przyjacielu, w którym udokumentowałam wszystko, co wiem o tworzeniu niesamowitych funkcji w trybie ciemnym.

Jednym z elementów układanki, który został tylko krótko wspomniany w artykule, jest właściwość CSS color-scheme i odpowiadający jej tag meta o tej samej nazwie. Oba ułatwiają życie deweloperom, ponieważ pozwalają na zastosowanie na stronie domyślnych ustawień motywu w arkuszu stylów klienta użytkownika, takich jak elementy sterujące formularzem, paski przewijania czy kolory systemowe CSS. Jednocześnie ta funkcja uniemożliwia przeglądarkom samodzielnie stosowanie jakichkolwiek przekształceń.

Obsługa przeglądarek

prefers-color-scheme

Obsługa przeglądarek

• 76
• 79
• 67
• 12.1

Źródło

color-scheme

Obsługa przeglądarek

• 81
• 81
• 96
• 13

Źródło

Arkusz stylów klienta użytkownika

Zanim przejdę dalej, krótko opiszę, czym jest arkusz stylów klienta użytkownika. W większości przypadków słowo klient użytkownika (UA) jest wymyślnym sposobem na określenie przeglądarki. Szablon stylów UA określa domyślny wygląd i sposób działania strony. Jak sugeruje nazwa, arkusz stylów UA zależy od danej wersji UA. Możesz sprawdzić atrybut UA w arkuszu stylów Chrome (i Chromium) i porównać go z atrybutem UA w Firefoksie lub Safari (i WebKit). Zazwyczaj pliki stylów UA są zgodne w większości kwestii. Na przykład wszystkie mają niebieskie linki, czarny tekst i białe tło, ale są też ważne (a czasem irytujące) różnice, na przykład w stylu elementów sterujących w formularzu.

Przyjrzyj się bliżej schowalni stylów UA w WebKit i sprawdź, jak działa ona w trybie ciemnym. (w arkuszu stylów przeprowadź pełne wyszukiwanie ciągu „ciemny”). Domyślne ustawienie stylu zmienia się w zależności od tego, czy tryb ciemny jest włączony czy wyłączony. Aby to zilustrować, podajemy przykład reguły CSS, która używa pseudoklasy :matches i zmiennych wewnętrznych WebKit, takich jak -apple-system-control-background, a także wewnętrznej dyrektywy preprocesora WebKit #if defined:

input,
input:matches([type="password"], [type="search"]) {
  -webkit-appearance: textfield;
  #if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
      HAVE_OS_DARK_MODE_SUPPORT
    color: text;
    background-color: -apple-system-control-background;
  #else
    background-color: white;
  #endif
  /* snip */
}

W przypadku właściwości color i background-color zobaczysz niestandardowe wartości. Ani text, ani -apple-system-control-background nie są prawidłowymi kolorami CSS. Są to semantyczne kolory wewnętrzne WebKit.

Okazuje się, że CSS ma ustandaryzowane semantyczne kolory systemu. Są one określone w CSS Color Module Level 4. Na przykład Canvas (nie mylić z tagiem <canvas>) oznacza tło aplikacji lub dokumentów, podczas gdy CanvasText jest przeznaczone dla tekstu w zawartości aplikacji lub w dokumentach. Te 2 elementy są ze sobą powiązane i nie należy ich używać oddzielnie.

Szablony stylów UA mogą używać własnych zastrzeżonych kolorów lub kolorów ze standaryzowanego systemu semantycznego, aby określić, jak domyślnie powinny być renderowane elementy HTML. Jeśli system operacyjny jest ustawiony na tryb ciemny lub używa ciemnego motywu, element CanvasText (lub text) będzie warunkowo biały, a element Canvas (lub -apple-system-control-background) będzie czarny. W efekcie spowoduje to, że spersonalizowana szata UA przypisze ten kod CSS tylko raz i zapewni obsługę zarówno trybu jasnego, jak i ciemnego.

/**
  Not actual UA stylesheet code.
  For illustrative purposes only.
*/
body {
  color: CanvasText;
  background-color: Canvas
}

Właściwość CSS color-scheme

Specyfikacja Modułu dostosowania kolorów CSS na poziomie 1 zawiera model i elementy sterujące automatyczną korektą kolorów przez klienta użytkownika, która ma na celu dostosowanie ich do preferencji użytkownika, takich jak tryb ciemny, korekta kontrastu czy konkretne schematy kolorów.

Zdefiniowana w niej właściwość color-scheme pozwala elementowi wskazywać schematy kolorów, które mają być renderowane. Wartości te są negocjowane z uwzględnieniem preferencji użytkownika, co powoduje wybraną kolorystykę, która wpływa na elementy interfejsu użytkownika (UI), takie jak domyślne kolory elementów sterujących formularzem i pasków przewijania, a także używane wartości kolorów systemu CSS. Obecnie obsługiwane są te wartości:

• normal Wskazuje, że element nie ma pojęcia o schematach kolorów, dlatego powinien zostać wyrenderowany z użyciem domyślnego schematu kolorów przeglądarki.

• [ light | dark ]+ wskazuje, że element wie i może obsługiwać wymienione schematy kolorów oraz określa uporządkowaną preferencję między nimi.

Uwaga: podanie obu słów kluczowych oznacza, że preferowany jest pierwszy schemat (przez autora), ale jeśli użytkownik woli drugi, jest on też akceptowany.

Na tej liście light oznacza jasną paletę kolorów z jasnymi kolorami tła i ciemnymi kolorami pierwszego planu, a dark odwrotnie – ciemnymi kolorami tła i jasnymi kolorami pierwszego planu.

W przypadku wszystkich elementów renderowanie za pomocą schematu kolorów powinno powodować, że kolory używane we wszystkich elementach interfejsu obsługiwanych przez przeglądarkę będą pasować do zamierzonego schematu kolorów. Przykłady to suwaki, podkreślenia w ramach sprawdzania pisowni, elementy sterujące formularzy itp.

Uwaga: właściwości CSS color-scheme można używać zarówno na poziomie :root, jak i na poziomie poszczególnych elementów.

W przypadku elementu :root renderowanie według schematu kolorów musi dodatkowo wpływać na kolor powierzchni obszaru roboczego (czyli globalny kolor tła), wartość początkową właściwości color i używane wartości kolorów systemowych. Trzeba też mieć wpływ na paski przewijania widocznego obszaru.

/*
  The page supports both dark and light color schemes,
  and the page author prefers dark.
*/
:root {
  color-scheme: dark light;
}

metatag color-scheme,

Aby zachować zgodność z właściwością CSS color-scheme, należy najpierw pobrać usługę porównywania cen (jeśli odwołuje się do niej za pomocą <link rel="stylesheet">) i ją przeanalizować. Aby ułatwić przeglądarkom renderowanie tła strony z pożądaną kolorystyką natychmiast, możesz podać wartość color-scheme w elemencie <meta name="color-scheme">.

<!--
  The page supports both dark and light color schemes,
  and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">

Łączę: color-scheme i prefers-color-scheme

Zarówno metatag, jak i właściwość CSS (jeśli zastosujesz ją do elementu :root) działają w ten sam sposób, dlatego zawsze zalecam określanie schematu kolorów za pomocą metatagu, aby przeglądarka mogła szybciej dostosować się do preferowanego schematu.

Chociaż w przypadku bezwzględnych wartości podstawowych żadne dodatkowe reguły CSS nie są wymagane, w ogólnym przypadku należy zawsze łączyć color-scheme i prefers-color-scheme. Na przykład zastrzeżony kolor -webkit-link w języku CSS WebKit, używany przez WebKit i Chrome do klasycznego niebieskiego koloru linku rgb(0,0,238), ma niewystarczający współczynnik kontrastu 2,23:1 na czarnym tle i nie spełnia zarówno wymagań WCAG AA, jak i WCAG AAA.

Wyeliminowaliśmy błędy w wersjach Chrome, WebKit i Firefox, a także problem z meta w standardzie HTML.

Interakcja z: prefers-color-scheme

Na początku może wydawać się, że współdziałanie właściwości CSS color-scheme i odpowiedniego tagu meta z funkcją mediów prefers-color-scheme dotyczącą preferencji użytkownika może być mylące. W fakcie świetnie się razem dopełniają. Najważniejsze jest to, że color-schemeokreśla wyłącznie domyślny wygląd, podczas gdy prefers-color-schemeokreśla wygląd stylizowany. Aby sobie to wyjaśnić, załóżmy, że:

<head>
  <meta name="color-scheme" content="dark light">
  <style>
    fieldset {
      background-color: gainsboro;
    }
    @media (prefers-color-scheme: dark) {
      fieldset {
        background-color: darkslategray;
      }
    }
  </style>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, legere ancillae ne vis.
  </p>
  <form>
    <fieldset>
      <legend>Lorem ipsum</legend>
      <button type="button">Lorem ipsum</button>
    </fieldset>
  </form>
</body>

Wbudowany kod CSS na stronie ustawia wartość background-color elementu <fieldset> na gainsboro w ogólnym przypadku, a na darkslategray, jeśli użytkownik preferuje schemat kolorów dark zgodnie z funkcją mediów prefers-color-scheme preferencji użytkownika.

Za pomocą elementu <meta name="color-scheme" content="dark light"> strona informuje przeglądarkę, że obsługuje ciemny i jasny motyw, przy czym preferuje ciemny.

W zależności od tego, czy system operacyjny jest w trybie ciemnym czy jasnym, cała strona jest jasna w ciemności lub odwrotnie, w zależności od arkusza stylów klienta użytkownika. Aby zmienić tekst akapitu lub kolor tła strony, nie trzeba używać dodatkowego kodu CSS dostarczonego przez programistę.

Zwróć uwagę, jak wartość background-color elementu <fieldset> zmienia się w zależności od tego, czy włączony jest tryb ciemny, zgodnie z regułami zawartymi w dostarczonym przez dewelopera wbudowanym arkuszu stylów na stronie. Może to być gainsboro lub darkslategray.

Tryb jasny: style określone przez programistę i klienta użytkownika. Tekst jest czarny, a tło białe zgodnie ze stylem przeglądarki. background-color elementu <fieldset> ma wartość gainsboro zgodnie z wbudowanym arkuszem stylów programisty.

Tryb ciemny: style określone przez dewelopera i klienta użytkownika. Tekst jest biały, a tło czarne zgodnie ze stylem klienta użytkownika. background-color elementu <fieldset> ma wartość darkslategray zgodnie z wbudowanym arkuszem stylów programisty.

Wygląd elementu <button> jest kontrolowany przez arkusz stylów klienta użytkownika. W ustawieniu color jest ustawiony kolor ButtonText, a ustawienia background-color i czterech border-color są ustawione na kolor systemu ButtonFace.

Tryb jasny: background-color i różne border-color są ustawione na kolor systemu ButtonFace.

Zwróć uwagę, jak zmienia się wartość border-color elementu <button>. Obliczona wartość atrybutów border-top-color i border-bottom-color zmienia się z rgba(0, 0, 0, 0.847) (czarnego) na rgba(255, 255, 255, 0.847) (białego), ponieważ klient użytkownika aktualizuje dynamicznie atrybuty ButtonFace na podstawie schematu kolorów. To samo dotyczy elementu <button>, którego właściwość color ma ustawiony odpowiedni kolor systemu ButtonText.

Tryb jasny: obliczone wartości atrybutów border-top-color oraz border-bottom-color, które w arkuszu stylów klienta użytkownika mają wartość ButtonFace są teraz rgba(0, 0, 0, 0.847).

Tryb ciemny: obliczone wartości atrybutów border-top-color i border-bottom-color, które w arkuszu stylów klienta użytkownika mają wartość ButtonFace są teraz rgba(255, 255, 255, 0.847).

Prezentacja

Efekty zastosowania komponentu color-scheme możesz zobaczyć w wersji demonstracyjnej Glitch w przypadku dużej liczby elementów HTML. Wersja demonstracyjna celowo pokazuje naruszenie standardów WCAG AA i WCAG AAA z kolorami linków wymienionymi w powyższym ostrzeżeniu.

Tryb demo toggled to color-scheme: light.

demo toggled to color-scheme: dark. Zwróć uwagę na kolory linków wskazujące na naruszenie standardów WCAG AA i WCAG AAA.

Podziękowania

Właściwość CSS color-scheme i odpowiadający jej tag meta zostały zaimplementowane przez Rune Lillesveen. Rune jest też współautorem specyfikacji modułu regulacji kolorów CSS na poziomie 1. Baner powitalny autorstwa Philippe Leone z Unsplash.