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”. 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 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 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

Ź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 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 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 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().

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.

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

Kolory systemowe w CSS

Przedstawiamy light-dark()

Praktyczne zastosowanie

Przedstawiamy `light-dark()`