Kolory zależne od schematu kolorów CSS z funkcją light-dark()

Kolory systemowe mogą reagować na obecnie używaną wartość color-scheme. Funkcja light-dark() udostępnia autorom te same możliwości.

Bramus

Kolory systemowe w CSS

W CSS możesz użyć wielu kolorów z jednej z wielu przestrzeni kolorów. Możesz na przykład użyć nazwanych kolorów, kolorów szesnastkowych, funkcji kolorów powiązanych z konkretną przestrzenią kolorów lub bardziej ogólnej funkcji color().

Na przykład nazwany kolor cornflowerblue może też być reprezentowany jako #6495ED, hsl(218.54deg 79.19% 66.08%) lub color(display-p3 0.43 0.58 0.9).

Oprócz różnych nazw i formatów CSS zawiera kolory opisane jako kolory systemowe, które są określone w module kolorów CSS na poziomie 4. Te kolory systemowe to kolory zdefiniowane przez przeglądarkę i reprezentowane przez słowo kluczowe.

Na przykład kolor systemowy Canvas (nie mylić z elementem <canvas>) reprezentuje „tło treści aplikacji lub dokumentów”. Dobrze komponuje się z elementem CanvasText, który reprezentuje „tekst w treści lub dokumentach aplikacji”, i należy go używać w połączeniu.

W CSS możesz ich używać w następujący sposób:

body {
  color: CanvasText;
  background-color: Canvas;
}

Domyślnie CanvasText daje kolor zbliżony do black, a Canvas to kolor zbliżony do white. Rzeczywista implementacja zależy od przeglądarki. Na przykład wartość CanvasText w Chrome daje wartość #121212, a w Safari jest ona określona jako nieco jaśniejsza #1e1e1e.

Ukrytą potęgą tych kolorów systemowych jest to, że mogą one reagować na obliczoną wartość właściwości color-scheme. Na przykład wartości CanvasText i Canvas są odwracane, gdy używanym obiektem color-scheme jest dark.

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

W tej prezentacji możesz zmienić wartość color-scheme ustawioną w :root i zobaczyć, jak strona reaguje.

• Gdy ma wartość light dark, oznacza to, że element obsługuje zarówno tryb jasny, jak i ciemny. Wybór wartości zależy od wartości warunku multimediów prefers-color-scheme.
• Gdy ma wartość light, oznacza to, że element obsługuje jasny schemat kolorów.
• Gdy ma wartość dark, oznacza to, że element obsługuje ciemny schemat kolorów.

Przedstawiamy light-dark()

Do tej pory reakcja na używaną wartość color-scheme była zarezerwowana dla kolorów systemowych. Dzięki light-dark(), określonym w module kolorów CSS Color Module Level 5, masz teraz te same możliwości.

light-dark() to funkcja, która przyjmuje 2 argumenty, z których oba muszą być typu <color>. Jedna z nich jest wybierana w zależności od użytego schematu kolorów.

• Jeśli używany schemat kolorów to light lub nieznany, zwracana jest obliczona wartość pierwszej wartości.
• Jeśli używany schemat kolorów to dark, zwracana jest obliczona wartość drugiego koloru.

Wynik funkcji light-dark() to <color>. Można go używać w CSS wszędzie tam, gdzie akceptowany jest atrybut <color>. np. we właściwościach color i background-color, ale też w funkcji takiej jak linear-gradient().

W poniższym przykładzie używany kolor tła to #333 w trybie ciemnym lub #ccc w trybie jasnym (albo nieznanym).

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

Pamiętaj, że aby funkcja light-dark() działała prawidłowo, musisz określić właściwość color-scheme. Ponieważ ta właściwość dziedziczy wartość, zwykle ustawiasz ją na :root, ale jeśli chcesz, możesz to zrobić także w konkretnym elemencie.

Praktyczne zastosowanie

W poniższym przykładzie kilka właściwości niestandardowych odzwierciedla kolory na stronie. Na potrzeby trybu ciemnego wartości tych właściwości niestandardowych są zastępowane inną wartością w warunku multimediów prefers-color-scheme.

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}

Dzięki usłudze light-dark() ten kod można uprościć. Ponieważ :root ma ustawienie color-scheme na light dark, wartości tych kolorów zmieniają się automatycznie przy przełączaniu systemu operacyjnego z jasnego na ciemny i odwrotnie.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Dodatkowo możesz wymusić na określonym poddrzewie DOM używanie tylko trybu jasnego lub ciemnego, ustawiając color-scheme na dark lub light. W poniższym przykładzie dotyczy to kolumny :root.