Kolory systemowe mogą reagować na obecnie używaną wartość color-scheme
. Funkcja light-dark()
udostępnia autorom te same możliwości.
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ówprefers-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
.