Определение темного режима в JS для динамической стилизации

const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(isDarkMode ? 'Тёмный режим включен.' : 'Тёмный режим выключен.');

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

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');

if (window.matchMedia) {
  // Все системы функционируют! 🚀
} else {
  // Возьмем курс на план B, как альтернативный подход к стилизации
}

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 ? 'тёмная' : 'светлая';
  // Бинарное искусство в действии 🎭
}

body::after {
  content: " ";
  display: block;
  height: 10px;
  background-color: var(--indicator-color);
}
// Используйте JS для обновления переменной --indicator-color

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('Светлый режим включен');
}

Окружение: 🌑 Тёмная тема       Окружение: 🌕 Светлая тема
Хамелеон:   🦎 (становится тёмным)  Хамелеон:   🦎 (становится светлым)

const imgElement = document.querySelector('img');

if (isDarkMode) {
  imgElement.src = '/path/to/dark-mode-image.png';
  // Добро пожаловать на темную сторону 🌚
} else {
  imgElement.src = '/path/to/light-mode-image.png';
  // Всегда есть место для света 🌝
}

function assignColorScheme() {
  const supportsThemeChange = window.matchMedia('(prefers-color-scheme)').media !== 'not all';
  document.body.className = supportsThemeChange ? fetchPreferredScheme() : 'light';
  // Мы не оставим никого в невыгодном положении ☀️
}

// Эта строчка кода поможет обеспечить, чтобы все пользователи были учтены!
schemeQuery.addEventListener('change', () => {
  console.log('Обнаружено изменение цветовой схемы системы');
});