Как проверить тему браузера в JavaScript: методы и примеры

Чтобы проверить тему браузера в JavaScript, вы можете использовать метод matchMediaвместе с медиа-запросами. Вот пример:

// Check for dark theme
const isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDarkTheme) {
  console.log('Dark theme is enabled.');
} else {
  console.log('Light theme is enabled.');
}

Этот код использует метод matchMediaс медиа-запросом '(prefers-color-scheme: dark)', чтобы проверить, предпочитает ли браузер темную тему. Если запрос соответствует, это означает, что темная тема включена.

В качестве альтернативы вы также можете использовать метод getComputedStyle, чтобы проверить вычисленный стиль элемента и определить тему. Вот пример:

// Check for dark theme
const bodyElement = document.body;
const computedStyle = window.getComputedStyle(bodyElement);
const theme = computedStyle.getPropertyValue('color-scheme');
if (theme === 'dark') {
  console.log('Dark theme is enabled.');
} else {
  console.log('Light theme is enabled.');
}

В этом коде мы получаем вычисленный стиль элемента и проверяем значение свойства color-scheme. Если для него установлено значение 'dark', это означает, что темная тема включена.