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

Thomas Steiner

Wprowadzenie

Funkcja multimediów ustawień użytkownika prefers-color-scheme

Funkcja multimediów w ustawieniach użytkownika prefers-color-scheme daje programistom pełną kontrolę nad wyglądem stron. Jeśli jeszcze tego nie wiesz, przeczytaj artykuł prefers-color-scheme: Cześć ciemności, mój stary przyjaciel, w którym udokumentowałam wszystko, co wiem o tworzeniu niesamowitych funkcji trybu ciemnego.

Element łamigłówki, o którym wspomniano tylko krótko w tym artykule, to właściwość CSS color-scheme i odpowiadający jej metatag o tej samej nazwie. Wszystko to ułatwia życie programistów, ponieważ pozwala ustawić na stronie wartości domyślne motywu, z arkusza stylów klienta użytkownika, np. elementy sterujące formularza, paski przewijania czy kolory systemu CSS. Jednocześnie ta funkcja zapobiega samodzielnemu stosowaniu przekształceń przez przeglądarki.

Obsługiwane przeglądarki

prefers-color-scheme

color-scheme

Arkusz stylów klienta użytkownika

Zanim przejdziemy dalej, wyjaśnię pokrótce, czym jest arkusz stylów klienta użytkownika. Słowo klient użytkownika (UA) to najczęściej zaawansowany sposób na określenie przeglądarki. 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 konkretnej UA. Możesz spojrzeć na arkusz stylów UA w Chrome (i Chromium) i porównać go z przeglądarką Firefox lub Safari (oraz WebKit). Arkusze stylów UA są zazwyczaj zgodne z większością rzeczy. Na przykład wszystkie linki mają kolor niebieski, ogólny tekst czarny, a kolor tła biały, ale występują też pewne istotne (i czasem irytujące) różnice, np. związane ze stylem elementów sterujących formularza.

Zapoznaj się z arkuszem stylów WebKit UA i sprawdź, jak działa w trybie ciemnym. (W arkuszu stylów wyszukaj słowo „ciemny” w pełnym tekście). Wartość domyślna podana w arkuszu stylów zmienia się w zależności od tego, czy tryb ciemny jest włączony. Aby to zilustrować, oto jedna z takich reguł CSS wykorzystująca pseudoklasę :matches i zmienne wewnętrzne WebKit, takie jak -apple-system-control-background, a także wewnętrzną dyrektywę przedprocesora 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 */
}

Możesz zauważyć kilka niestandardowych wartości we właściwościach color i background-color powyżej. Ani text, ani -apple-system-control-background nie są prawidłowymi kolorami CSS. Są to kolory semantyczne wbudowane w WebKit.

Okazuje się, że CSS ma ustandaryzowane kolory systemów semantycznych. Są one określone w module kolorów CSS Color Module Level 4. Na przykład fragment Canvas (nie mylić z tagiem <canvas>) służy jako tło do treści lub dokumentów aplikacji, a CanvasText – do tekstu w treści lub dokumentach aplikacji. Można je stosować razem i nie należy ich używać oddzielnie.

Aby określić domyślny sposób renderowania elementów HTML, arkusze stylów UA mogą używać własnych zastrzeżonych lub standardowych kolorów systemu semantycznego. Jeśli system operacyjny jest ustawiony na tryb ciemny lub używa ciemnego motywu, właściwość CanvasText (lub text) jest warunkowo ustawiona na biały, a Canvas (lub -apple-system-control-background) – na czarny. Arkusz stylów UA przypisuje poniższy kod CSS tylko raz i obejmuje 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 – poziom 1 wprowadza model i kontroluje automatyczną korektę kolorów przez klienta użytkownika. Ma ona na celu obsługę preferencji użytkownika, takich jak tryb ciemny, korekta kontrastu czy konkretne schematy kolorów.

Zdefiniowana w niej właściwość color-scheme pozwala elementowi wskazać schematy kolorów, z którymi ten element może być wygodnie renderowany. Wartości te są negocjowane z preferencjami użytkownika, co skutkuje wybranym schematem kolorów, który wpływa na takie elementy interfejsu, jak domyślne kolory elementów sterujących formularza i paski 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 zna schematów kolorów, więc powinien być renderowany 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, a także wyraża między nimi uporządkowaną preferencję.

Na tej liście light reprezentuje jasny schemat kolorów, z jasnymi kolorami tła i ciemnymi kolorami pierwszego planu, natomiast dark wskazuje odwrotność, czyli ciemne kolory tła i jasne kolory pierwszego planu.

W przypadku wszystkich elementów renderowanie za pomocą schematu kolorów powinno powodować dopasowanie kolorów we wszystkich interfejsach udostępnianych przez przeglądarkę, aby element był zgodny ze schematem kolorów. Przykładami takich treści są paski przewijania, opcje sprawdzania pisowni, elementy sterujące formularza itp.

W przypadku elementu :root renderowanie za pomocą 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. Poza tym powinno też wpływać 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

Zaakceptowanie właściwości CSS color-scheme wymaga wcześniejszego pobrania arkusza CSS (jeśli odwołuje się do niego w elemencie <link rel="stylesheet">) i jego przeanalizowania. Aby natychmiast pomóc klientom użytkownika renderować tło strony w wybranym schemacie kolorów, możesz też 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 zostanie zastosowana do elementu :root) dają w efekcie identyczne działanie, zalecamy więc zawsze określać schemat kolorów za pomocą meta tagu, aby przeglądarka szybciej przystosowała się do preferowanego schematu.

Chociaż w przypadku bezwzględnych stron podstawowych nie są potrzebne dodatkowe reguły CSS, w ogólnym przypadku należy zawsze łączyć atrybuty 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 niebieskiego rgb(0,0,238) ma niewystarczający współczynnik kontrastu 2,23:1 na czarnym tle i nie spełnia wymagań zarówno WCAG AA, jak i wymagań WCAG AAA.

Udało mi się naprawić błędy w Chrome, WebKit i Firefoksie, a także metaproblem w standardzie HTML.

Interakcja z: prefers-color-scheme

Współdziałanie właściwości CSS color-scheme i powiązanego z nim metatagu z funkcją multimediów w ustawieniach użytkownika prefers-color-scheme może w pierwszej chwili wydawać się niejasne. Wręcz przeciwnie, grają ze sobą świetnie. Najważniejsze jest to, że color-scheme określa domyślny wygląd, natomiast prefers-color-scheme określa wygląd, który określa styl. Aby 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 w ogólnym przypadku wartość background-color elementu <fieldset> na gainsboro oraz na darkslategray, jeśli użytkownik preferuje schemat kolorów dark zgodnie z funkcją multimediów preferencji użytkownika prefers-color-scheme.

Za pomocą elementu <meta name="color-scheme" content="dark light"> strona informuje przeglądarkę, że obsługuje ona ciemny i jasny motyw, ale z wyprzedzeniem korzysta z ciemnego motywu.

W zależności od tego, czy system operacyjny jest ustawiony na tryb ciemny czy jasny, cała strona będzie wyświetlana w ciemnych kolorach lub na odwrót, w zależności od arkusza stylów klienta użytkownika. Aby zmienić tekst akapitu lub kolor tła strony, nie trzeba korzystać z dodatkowej usługi porównywania cen dostarczonej przez dewelopera.

Zwróć uwagę, jak parametr background-color elementu <fieldset> zmienia się w zależności od tego, czy tryb ciemny jest włączony, zgodnie z regułami podanymi w umieszczonym na stronie wbudowanym arkuszu stylów. Wartość to gainsboro lub darkslategray.

Wygląd elementu <button> jest określany przez arkusz stylów klienta użytkownika. Element color jest ustawiony na kolor systemowy ButtonText, a background-color i 4 elementy border-color mają kolor systemowy ButtonFace.

Zanotuj teraz, jak zmienia się border-color elementu <button>. Wartość obliczona dla właściwości border-top-color i border-bottom-color zmieni się z rgba(0, 0, 0, 0.847) (czarny) na rgba(255, 255, 255, 0.847) (biała), ponieważ klient użytkownika aktualizuje wartość ButtonFace dynamicznie na podstawie schematu kolorów. To samo dotyczy atrybutu color elementu <button>, który ma ustawiony odpowiedni kolor systemowy ButtonText.

Wersja demonstracyjna

Efekty działania funkcji color-scheme w przypadku dużej liczby elementów HTML możesz zobaczyć w demonstracji funkcji Uszkodzenie. Demonstracja celowo pokazuje naruszenie zasad WCAG AA i WCAG AAA oraz kolorami linków wspomnianymi w ostrzeżeniu powyżej.

Podziękowania

Właściwość CSS color-scheme i odpowiadający jej metatag zostały wdrożone przez Rune Lillesveen. Rune jest też współredaktorem specyfikacji modułu dostosowania kolorów CSS poziomu 1. Baner powitalny od Philippe Leone w serwisie Unsplash.