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 odpowiedni metatag pozwalają programistom włączyć na stronach ustawienia domyślne specyficzne dla motywu arkusza stylów klienta użytkownika.

Thomas Steiner

Wprowadzenie

Funkcja multimediów w prefers-color-scheme

Funkcja multimediów prefers-color-scheme w ramach ustawień użytkownika zapewnia deweloperom pełną kontrolę nad wyglądem ich 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.

Jeden z fragmentów układanki, o których wspomniano tylko krótko w artykule, to właściwość CSS color-scheme i odpowiadający jej metatag o tej samej nazwie. Obie te rozwiązania ułatwiają pracę jako programistę, pozwalając na dostosowanie ustawień arkusza stylów klienta użytkownika związanych z motywem, takich jak np. elementy sterujące formularza, paski przewijania czy kolory systemu CSS. Jednocześnie ta funkcja uniemożliwia przeglądarkom samodzielnie stosowanie przekształceń.

Obsługiwane przeglądarki

prefers-color-scheme

color-scheme

Arkusz stylów klienta użytkownika

Zanim przejdziemy dalej, krótko wyjaśnię, czym jest arkusz stylów klienta użytkownika. Zwykle słowo klient użytkownika (UA) to wymyślny sposób określenia nazwy przeglądarka. Arkusz stylów UA określa domyślny wygląd i sposób działania strony. Jak sama nazwa wskazuje, arkusz stylów UA zależy od UA, której dotyczy problem. Możesz zapoznać się z arkuszem stylów UA Chrome (i Chromium) i porównać go z przeglądarkami Firefoksa lub Safari (i WebKit). W większości przypadków arkusze stylów UA są zgodne z większością. Na przykład linki mają niebieski, ogólny tekst czarny, a kolor tła biały. Występują też istotne (i czasem irytujące) różnice, np. styl elementów sterujących formularza.

Przyjrzyj się bliżej arkuszowi stylów UA WebKit i sprawdź, jak działa tryb ciemny. (Wyszukaj w arkuszu stylów tekst „dark”). Wartość domyślna w arkuszu stylów zmienia się w zależności od tego, czy tryb ciemny jest włączony, czy wyłączony. Aby to zilustrować, poniżej przedstawiamy jedną z takich reguł CSS, która korzysta ze zmiennych pseudoklasy :matches i zmiennych WebKit-internal, takich jak -apple-system-control-background, oraz z dyrektywy WebKit-internal dotyczące wstępnego przetwarzania danych #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 */
}

Zauważysz, że we właściwościach color i background-color są niestandardowe wartości. Ani text, ani -apple-system-control-background nie są prawidłowymi kolorami CSS. Są to kolory semantyczne stosowane wewnętrznie przez WebKit.

Okazuje się, że CSS ma ustandaryzowane kolory systemu semantycznego. Określasz je w module kolorów CSS na poziomie 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.

Aby określić sposób domyślnego renderowania elementów HTML, arkusze stylów UA mogą używać własnych zastrzeżonych kolorów lub ustandaryzowanych kolorów systemu semantycznego. Jeśli system operacyjny jest ustawiony na tryb ciemny lub używa ciemnego motywu, CanvasText (lub text) jest warunkowo ustawiony na biały, a Canvas (lub -apple-system-control-background) – na czarny. Arkusz stylów UA tylko raz przypisze poniższy kod CSS, uwzględniając zarówno tryb jasny, jak i ciemny.

/**
  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 preferencjami użytkownika, co pozwala wybrać schemat kolorów, który wpływa na takie elementy interfejsu, jak domyślne kolory elementów sterujących formularza 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 w ogóle nie wie o schematach kolorów, więc powinien być renderowany z domyślnym schematem kolorów przeglądarki.

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

Na tej liście atrybut light reprezentuje jasny schemat kolorów z jasnymi kolorami tła i ciemnymi kolorami pierwszego planu, podczas gdy kolor dark reprezentuje przeciwny schemat – z ciemnymi kolorami tła i jasnymi kolorami pierwszego planu.

W przypadku wszystkich elementów renderowanie według schematu kolorów powinno sprawić, że kolory używane we wszystkich interfejsach użytkownika w przeglądarce elementu będą zgodne z intencją schematu kolorów. Przykłady to paski przewijania, podkreślanie pisowni, elementy sterujące formularza itp.

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 systemu. 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 pomóc klientom użytkownika natychmiast wyrenderować tło strony w odpowiednim schemacie kolorów, w elemencie <meta name="color-scheme"> można też podać wartość 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

Ponieważ zarówno metatag, jak i właściwość CSS (jeśli jest stosowana do elementu :root) dają w końcu to samo zachowanie, zawsze zalecamy określenie schematu kolorów za pomocą tagu meta, 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 CSS WebKit -webkit-link używany przez WebKit i Chrome w przypadku klasycznego linku „rgb(0,0,238)” ma niewystarczający współczynnik kontrastu 2,23:1 na czarnym tle i nie spełnia wymagań WCAG AA oraz 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

Współdziałanie właściwości CSS color-scheme i odpowiadającego mu tagu meta z funkcją multimediów prefers-color-scheme może w pierwszej chwili wydawać się niejasne. W rzeczywistości świetnie razem grają. Najważniejszą rzeczą jest to, że color-scheme wyłącznie określa wygląd domyślny, a prefers-color-scheme określa wygląd możliwy do zastosowania. Aby sobie to wytłumaczyć, 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 w polu background-color właściwości background-color elementu <fieldset> zwykle wartość gainsboro, a jeśli użytkownik preferuje schemat kolorów dark, zgodnie z preferencjami użytkownika prefers-color-scheme.darkslategray

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

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. Nie wymaga to dodania żadnego dodatkowego kodu CSS udostępnionego przez dewelopera do zmiany tekstu akapitu czy koloru tła strony.

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. Jest to gainsboro lub darkslategray.

Wygląd elementu <button> zależy od arkusza stylów klienta użytkownika. Jej color jest ustawiony na kolor systemowy ButtonText, a kolor background-color i 4 kolory border-color – ButtonFace.

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

Pokaz

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 zasad WCAG AA i AAA w kolorach linków wymienionych w ostrzeżeniu powyżej.

Podziękowania

Właściwość CSS color-scheme i powiązany z nią metatag zostały wdrożone przez Rune Lillesveen. Rune jest też współredaktorem specyfikacji modułu CSS „Color Adjust Module” na poziomie 1. Baner powitalny: Philippe Leone i Unsplash.