Ta strona została przetłumaczona przez Cloud Translation API.

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.

Bramus

Kolory systemowe w CSS

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”. Dobrze komponują się z elementem CanvasText i należy go używać w połączeniu z elementem CanvasText, który reprezentuje „tekst w treści lub dokumentach aplikacji”.

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 CanvasText i Canvas 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 zasada ma wartość light, element obsługuje jasny schemat kolorów.
Ustawienie 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

Źródło

Do tej pory reakcja na wartość color-scheme była zarezerwowana dla kolorów systemowych. Dzięki funkcji light-dark() określonej w module kolorów CSS na poziomie 5, również można korzystać z tych samych możliwości.

light-dark() to funkcja, która akceptuje 2 argumenty, z których każdy musi być typu <color>. Wybór jednej z tych opcji zależy 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 color i background-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 tag light-dark() działał prawidłowo, musisz podać tag color-scheme. Ta właściwość dziedziczy zwykle ustawienie :root, ale jeśli chcesz, możesz to zrobić też na konkretnym elemencie.

Praktyczne zastosowanie

W tym przykładzie kilka właściwości niestandardowych reprezentuje kolory na stronie. Aby uwzględnić tryb ciemny, wartości tych właściwości niestandardowych są zastępowane inną wartością w warunkach 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 w :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().

Dodatkowo możesz wymusić, aby określony poddrzew DOM używał tylko trybu jasnego lub ciemnego, ustawiając wartość 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. Osiąga się to przez manipulowanie wartością color-scheme.

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

Kolory systemowe w CSS

Przedstawiamy light-dark()

Praktyczne zastosowanie

Przedstawiamy `light-dark()`