Определение темного режима в JS для динамической стилизации
Быстрый ответ
Если вы хотите определить, используется ли тёмный режим в JavaScript, примените следующий код:
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(isDarkMode ? 'Тёмный режим включен.' : 'Тёмный режим выключен.');
Метод window.matchMedia()
позволяет определить, включён ли на устройстве пользователя тёмный режим, возвращая логическое значение: true
для тёмного режима и false
для светлого.
Отслеживание изменений системных настроек
В случае необходимости отслеживать изменения в цветовой схеме системы используйте event listener:
const schemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
function updateScheme(event) {
const newScheme = event.matches ? "тестная" : "светлая";
console.log(`Цветовая схема системы обновлена на ${newScheme}.`);
// Время адаптировать интерфейс 🌓
}
schemeQuery.addEventListener('change', updateScheme);
// Если работаете в браузере старше, например, Safari версии до 14, используйте schemeQuery.addListener(updateScheme) вместо addEventListener
Ручное изменение цветов в элементах JavaScript
Для компонентов, цвет которых неизменяем с помощью CSS, например, Stripe Elements, нужно вручную установить цветовую тему используя JavaScript:
function configureStripeElementTheme(element, theme) {
const styleParams = theme === 'dark' ? { base: { color: '#ffffff' } } : { base: { color: '#000000' } };
// Теперь Stripe поддерживает оба режима 🧛♂️🧛♀️
element.update({ style: styleParams });
}
// Предположим, у вас есть инициализированный элемент Stripe 'cardElement'
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
configureStripeElementTheme(cardElement, prefersDarkMode ? 'dark' : 'light');
Проверка поддержки медиа-запросов
Перед использованием window.matchMedia
проверьте предоставляет ли поддержку ваш браузер:
if (window.matchMedia) {
// Все системы функционируют! 🚀
} else {
// Возьмем курс на план B, как альтернативный подход к стилизации
}
Решение проблемы с iOS 13.4
На некоторых старых версиях iOS (например, 13.4 и ниже) могут быть проблемы с обработкой события 'change':
const mqList = window.matchMedia('(prefers-color-scheme: dark)');
// Адаптируемся к старым устройствам iOS
if (typeof mqList.addListener === 'function') {
mqList.addListener(updateScheme);
} else {
mqList.addEventListener('change', updateScheme);
}
Учёт различных цветовых схем
Не забывайте, что цветовые схемы могут быть более разнообразными, чем просто "светлая" и "тёмная":
switch (schemeQuery.matches) {
case 'dark':
setAppTheme('тёмная');
break;
case 'light':
setAppTheme('светлая');
break;
// Не ограничивайте себя – добавляйте больше вариантов! 🎨
}
Получение предпочтительной схемы пользователя
Для динамического определения предпочтительной цветовой схемы пользователя создайте функцию:
function fetchPreferredScheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'тёмная' : 'светлая';
// Бинарное искусство в действии 🎭
}
Обнаружение тёмного режима и его обозначение
Обозначьте используемую цветовую схему, например, с помощью псевдоэлемента ::after
:
body::after {
content: " ";
display: block;
height: 10px;
background-color: var(--indicator-color);
}
// Используйте JS для обновления переменной --indicator-color
Для работы с псевдоэлементами примените метод getComputedStyle()
:
const style = window.getComputedStyle(document.body, '::after');
console.log(style.backgroundColor);
Визуализация
Принцип работы похож на то, как хамелеон меняет свой окрас, приспосабливаясь к окружающей среде:
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Система предпочитает тёмные тона (🌑)
console.log('Тёмный режим включен');
} else {
// Система предпочитает яркие тона (🌕)
console.log('Светлый режим включен');
}
Ваш скрипт адаптируется к предпочтениям пользователя точно так же, как хамелеон меняет свой цвет под влиянием окружающей среды:
Окружение: 🌑 Тёмная тема Окружение: 🌕 Светлая тема
Хамелеон: 🦎 (становится тёмным) Хамелеон: 🦎 (становится светлым)
Это обеспечивает гармоническое отображение пользовательских предпочтений в дизайне вашего веб-приложения.
Динамическое изменение источников изображений
Following are the steps to change images depending on the color scheme:
const imgElement = document.querySelector('img');
if (isDarkMode) {
imgElement.src = '/path/to/dark-mode-image.png';
// Добро пожаловать на темную сторону 🌚
} else {
imgElement.src = '/path/to/light-mode-image.png';
// Всегда есть место для света 🌝
}
Запасной вариант при отсутствии поддержки
В случае отсутствия поддержки цветовых схем примените zapasnoy variant:
function assignColorScheme() {
const supportsThemeChange = window.matchMedia('(prefers-color-scheme)').media !== 'not all';
document.body.className = supportsThemeChange ? fetchPreferredScheme() : 'light';
// Мы не оставим никого в невыгодном положении ☀️
}
Проверка совместимости
Проверьте способность к работе событийного слушателя 'change' на различных устройствах, чтобы обеспечить плавный пользовательский опыт:
// Эта строчка кода поможет обеспечить, чтобы все пользователи были учтены!
schemeQuery.addEventListener('change', () => {
console.log('Обнаружено изменение цветовой схемы системы');
});
Полезные материалы
- prefers-color-scheme – CSS: Каскадные таблицы стилей | MDN — Документация MDN по
matchMedia
для определения тёмного режима. - Темный режим в CSS | CSS-Tricks — CSS-Tricks разъясняют, как определить тёмный режим с использованием CSS, JavaScript и React.
- Can I use... Support tables for HTML5, CSS3, etc — Совместимость браузеров с медиа-функцией
prefers-color-scheme
. - Медиа–запросы для стандартных устройств | CSS-Tricks — Справочник по медиа–запросам для стандартных устройств.
- prefers-color-scheme: Привет, тьма, моя старая подруга | Статьи | web.dev — Инструкции по реализации обнаружения тёмного режима в JavaScript, представлены на web.dev.
- Создание переключателя темного/светлого режима с помощью CSS-переменных – DEV Community — Инструкции по созданию переключателя для темного режима с использованием CSS и JavaScript.