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

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

W CSS możesz używać wielu kolorów z jednego z wielu przestrzeni barwowych. Możesz na przykład używać 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 kolor o nazwie cornflowerblue może być też reprezentowany jako #6495ED, hsl(218.54deg 79.19% 66.08%) lub color(display-p3 0.43 0.58 0.9).

Oprócz tych nazw i formatów CSS zawiera też kolory opisane jako kolory systemowe, określone w CSS Color Module Level 4. Te kolory systemowe są 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”. Jest ona powiązana z tagiem CanvasText, który reprezentuje „tekst w treści aplikacji lub dokumentach”.

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 CanvasText w Chrome powoduje wyświetlenie #121212, podczas gdy w Safari jest ono wyświetlane jako nieco jaśniejsze #1e1e1e.

Ukryte możliwości tych kolorów systemowych polegają na tym, że mogą one reagować na obliczoną wartość właściwości color-scheme. Na przykład wartości CanvasTextCanvas są odwracane, gdy użyta wartość color-scheme to dark.

:root {
 
color-scheme: dark;
}

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

W tym pokazie możesz zmienić wartość color-scheme ustawioną w elemencie :root i obserwować, jak zmienia się strona.

  • Wartość light dark wskazuje, że element obsługuje tryb jasny i ciemny. Wybrana wartość zależy od wartości atrybutu prefers-color-scheme stan nośnika.
  • Gdy ma wartość light, wskazuje, że element obsługuje jasną kolorystykę.
  • Gdy jest ustawiony na dark, oznacza, że element obsługuje ciemny schemat kolorów.
Strona, na której możesz zmienić wartość parametru color-scheme. Po zmianie kolorów strony zmieniają się one z jasnych na ciemne lub odwrotnie, mimo że deklaracje w elemencie body pozostają takie same.

Przedstawiamy light-dark()

Obsługa przeglądarek

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5

Źródło

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

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

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

Wynik funkcji light-dark() to <color>. Można go używać w usługach porównywania cen wszędzie tam, gdzie akceptowane są płatności <color>. Na przykład w przypadku właściwości colorbackground-color, ale też w funkcji takiej jak linear-gradient().

W tym przykładzie użyty kolor tła to #333 w trybie ciemnym lub #ccc w trybie jasnym (lub nieznanym).

:root {
 
color-scheme: light dark;
}

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

Pamiętaj, że aby interfejs light-dark() działał poprawnie, musisz określić color-scheme. Ponieważ ta właściwość jest dziedziczona, zwykle ustawiasz ją w elemencie :root, ale jeśli chcesz, możesz ją ustawić w konkretnym elemencie.

Praktyczne zastosowanie

W tym przykładzie kilka właściwości niestandardowych reprezentuje kolory na stronie. Aby umożliwić działanie trybu ciemnego, wartości tych właściwości niestandardowych są zastępowane inną wartością w stanie medió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;
 
}
}
Strona, która reaguje na tryb jasny lub ciemny za pomocą prefers-color-scheme.
Wartości kolorów są zmieniane w CSS za pomocą zapytania o media.

Dzięki light-dark() ten kod można uprościć. Ponieważ color-scheme ma wartość light dark:root, wartości tych kolorów zmieniają się automatycznie, gdy zmieniasz tryb 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);
}
Strona, która reaguje na tryb jasny lub ciemny za pomocą prefers-color-scheme.
Wartości kolorów są zmieniane za pomocą light-dark().

Dodatkową zaletą jest to, że w określonym poddrzewie DOM można wymusić używanie tylko trybu jasnego lub ciemnego. W tym celu ustaw color-scheme na dark lub light. W tym przykładzie jest to :root.

Strona, która reaguje na tryb jasny lub ciemny za pomocą prefers-color-scheme.
Wartości kolorów są zmieniane za pomocą light-dark().
Za pomocą jednej z opcji możesz wymusić tryb jasny lub ciemny. Jest to możliwe dzięki manipulowaniu wartością color-scheme.