Методы проверки темного режима в JavaScript на совместимость устройств

Чтобы проверить, находится ли устройство в темном режиме с помощью JavaScript, вы можете использовать следующие методы:

  1. Использование метода matchMedia:

    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // Dark mode is enabled
    } else {
    // Dark mode is not enabled
    }
  2. Использование прослушивателя событий window.matchMedia:

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    if (e.matches) {
    // Dark mode is enabled
    } else {
    // Dark mode is not enabled
    }
    });
  3. Проверка значения свойства CSS color-scheme:

    if (window.matchMedia && window.matchMedia('(color-scheme: dark)').matches) {
    // Dark mode is enabled
    } else {
    // Dark mode is not enabled
    }
  4. Использование API localStorageдля сохранения предпочтительной цветовой схемы пользователя:

    if (localStorage.getItem('colorScheme') === 'dark') {
    // Dark mode is enabled
    } else {
    // Dark mode is not enabled
    }

Обратите внимание, что эти методы могут иметь проблемы с совместимостью с браузерами, поэтому важно тщательно протестировать их в разных браузерах.

, CSS, localStorage