CSS light-dark() — два кольори для світлої і темної теми

CSS функція light-dark() задає два кольори одним рядком: перший для світлої теми, другий для темної.

правити

Загальний опис

Раніше кожен колір теми доводилось дублювати в @media (prefers-color-scheme: dark). Файл стилів роздувався вдвічі, а половина правил існувала лише щоб перевизначити іншу половину.

light-dark() прибирає це дублювання: обидва значення стоять поруч, і браузер сам обирає потрібне.

правити

Нотатка

Функція працює тільки якщо задано color-scheme — інакше браузер не знає, яку тему вважати активною.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

light-dark(<color-light>, <color-dark>)

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
light-dark	123+	120+	17.5+	109+	123+	-

Підтримка: мобільні переглядачі

Переглядач
light-dark	123+	yes	yes	17.5+

Приклади

+ запропонувати свій приклад у пісочниці

<p class="panel">Колір змінюється разом із темою системи</p>

:root {
    /* без цього рядка light-dark() не працює */
    color-scheme: light dark;
}

.panel {
    background: light-dark(#ffffff, #14170f);
    color: light-dark(#14170f, #eceee3);
    padding: 1rem;
}