CSS color-scheme — підтримка темної теми

CSS властивість color-scheme повідомляє браузеру, у яких колірних схемах сторінка вміє рендеритись — світлій, темній чи обох.

правити

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

Це не про твої стилі, а про браузерні. Смуга прокрутки, поля вводу, випадаючі списки, стандартні кнопки — усе це малює браузер, і без color-scheme він малюватиме їх світлими навіть на чорному тлі.

Один рядок color-scheme: light dark — і скролбар, і форми одразу підлаштуються під тему користувача.

правити

Порада

Пиши color-scheme: light dark на :root до всіх інших стилів темної теми. Без цього нативні елементи лишаться світлими плямами на темному сайті.

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

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

Синтаксис

color-scheme: normal | [ light || dark ] | only light;

Властивість color-scheme може отримувати 4 значень:

normal

Схему визначає браузер.

автор: NagarD

правити

light

Елемент підтримує світлу схему.

автор: NagarD

правити

dark

Елемент підтримує темну схему.

автор: NagarD

правити

only

Заборонити браузеру перемикати схему примусово.

автор: NagarD

правити

Переглядачі

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

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

Переглядач
color-scheme	81+	96+	13+	68+	81+	-

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

Переглядач
color-scheme	81+	yes	yes	13+

Приклади

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

<input type="text" placeholder="Поле підлаштується під тему">

:root {
    color-scheme: light dark;
}

/* далі — власні кольори через media query */
@media (prefers-color-scheme: dark) {
    body {
        background: #14170f;
        color: #eceee3;
    }
}