Поддержка тёмной темы на сайте

361
Алексей,
Поддержка тёмной темы на сайте
Поддержка тёмной темы на сайте

Всё очень просто, достаточно использовать медиа-запрос "prefers-color-scheme: dark". Он срабатывает, когда на устройстве пользователя включена тёмная тема.

Всё очень просто, достаточно использовать медиа-запрос "prefers-color-scheme: dark". Он срабатывает, когда на устройстве пользователя включена тёмная тема.

Пример:

:root{ /*Светлая тема*/
	--main-bg-color: #544d56;
	--main-text-color: #000000;
}
@media (prefers-color-scheme: dark) {
	:root{ /*Тёмная тема*/
		--main-bg-color: #0a0c0e;
		--main-text-color: #e4e4e4;
	}
}

Используя данные переменные, стили сайта будут меняться в зависимости от выбранной темы.

body{
	background-color: var(--main-bg-color);
	color: var(--main-text-color);
}

Для отладки тёмной темы, можно переключить её в инструментах разработчика:

  • Открываем панель, F12
  • Открываем командную строку, Ctrl + Shift + P
  • Вводим "Show Rendering"
  • Находим пункт "Emulate CSS media feature prefers-color-scheme" и переключаем в значение "dark"
Отладка тёмной темы сайта

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.

Опубликовано 6 сентября 2022 | Обновлено 2 октября 2022
css, темная тема, юзабилити
Поделиться
Комментарии
Авторизуйтесь чтобы получать уведомления об ответе
Всё очень просто, достаточно использовать медиа-запрос "prefers-color-scheme: dark". Он срабатывает, когда на устройстве пользователя включена тёмная тема.