light-dark()
Функція <color> CSS light-dark() (світла-темна) дає змогу задавати властивості два кольори, з яких один буде повернений залежно від того, обрав розробник світлу чи темну палітру, або чи попросив користувач використовувати світлу, чи темну колірну тему – без необхідності обгортати кольори теми в запит ознаки медіа prefers-color-scheme.
Користувачі можуть сповіщати про свої побажання щодо колірної палітри за допомогою своїх системних налаштувань (наприклад, світлого чи темного режиму) або налаштувань користувацького агента. Функція light-dark() дає змогу надавати два значення кольору там, де приймається будь-яке значення <color>. Колірна функція CSS light-dark() повертає перше значення, якщо користувацьке налаштування задано як light або не задано, і друге значення, якщо користувацьке налаштування задано як dark.
Щоб увімкнути підтримку колірної функції light-dark(), властивість color-scheme повинна мати значення light dark, яке зазвичай задається на псевдокласі :root.
:root {
color-scheme: light dark;
}
body {
color: light-dark(#333b3c, #efefec);
background-color: light-dark(#efedea, #223a2c);
}
Синтаксис
/* Іменовані значення кольорів */
color: light-dark(black, white);
/* Колірні значення RGB */
color: light-dark(rgb(0 0 0), rgb(255 255 255));
/* Своєрідні властивості */
color: light-dark(var(--light), var(--dark));
Значення
Функційний запис: light-dark(light-color, dark-color)
light-colorЗначення
<color>, яке буде задано для світлоїcolor-scheme.dark-colorЗначення
<color>, яке буде задано для темноїcolor-scheme.
Формальний синтаксис
Інформація про синтаксис недоступна
Жодного значення не знайшлося в базі даних.
Приклад
Задання кольорів на основі колірної палітри
Усталено, в браузерах, що це підтримують, колір, повернений колірною функцією light-dark(), залежить від налаштувань користувача, заданих через налаштування операційної системи (наприклад, світлий або темний режим) або налаштування користувацького агента. Також це налаштування можна змінити в інструментах розробника в браузері.
HTML
Додано три розділи, щоб забезпечити можливість вибору світлих кольорів, темних кольорів та кольорів, вибраних на основі обраної користувачем колірної палітри.
<h1>Функція CSS <code>light-dark()</code></h1>
<section>
<h2>Автоматично</h2>
<p>
Цей розділ реагуватиме на користувацькі налаштування системи або
користувацького агента.
</p>
</section>
<section class="light">
<h2>Світла</h2>
<p>Цей розділ буде світлим завдяки <code>color-scheme: light;</code>.</p>
</section>
<section class="dark">
<h2>Темна</h2>
<p>Цей розділ буде темним завдяки <code>color-scheme: dark;</code>.</p>
</section>
CSS
Додано кольори як для світлої, так і для темної тем. Також для документа на :root задано color-scheme, щоб увімкнути колірну функцію light-dark() для всього документа.
:root {
/* це повинно бути задано, щоб перемикатися між світлим і темним */
color-scheme: light dark;
--light-bg: ghostwhite;
--light-color: darkslategray;
--light-code: tomato;
--dark-bg: darkslategray;
--dark-color: ghostwhite;
--dark-code: gold;
}
* {
background-color: light-dark(var(--light-bg), var(--dark-bg));
color: light-dark(var(--light-color), var(--dark-color));
}
code {
color: light-dark(var(--light-code), var(--dark-code));
}
На додачу до вмикання функції light-dark(), властивість color-scheme дозволяє перевизначати колірну палітру користувача для розділів документа. Примусове використання світлої або темної колірної палітри для розділу сторінки можна зробити, задавши властивість color-scheme зі значенням light або dark.
[!NOTE] Загалом, так не слід робити, а тут це використовується для демонстрації. Якщо користувач висловлює побажання, його налаштування зазвичай не слід відкидати.
.light {
/* примусово використовувати color-scheme light */
color-scheme: light;
}
.dark {
/* примусово використовувати color-scheme dark */
color-scheme: dark;
}