Как определить темный режим с помощью JavaScript

Обнаружение темного режима и обнаружение изменения режима с помощью JavaScript

Используя CSS, мы можем обнаружить темный режим, используяprefers-color-schemeмедиа-запрос.

Но .. что, если нам придется использовать JavaScript? Недавно я столкнулся с этой проблемой, потому что у меня был код JavaScript, который добавлял изображение на страницу, но я хотел показать другое изображение, основанное на светлом / темном режиме.

Вот как мы можем это сделать.

Во-первых, определите,matchMediaобъект существует (в противном случае браузер не поддерживает темный режим, и вы можете вернуться в светлый режим).

Затем проверьте, есть ли темный режим, используя

window.matchMedia('(prefers-color-scheme: dark)').matches

Это вернетtrueесли включен темный режим.

Вот полный пример, в котором я инвертирую цвета изображения в темном режиме:

const img = document.querySelector('#myimage')
if (window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: dark)').matches) {
  img.style.filter="invert(100%)";
}

Однако есть проблема: что, если пользователь изменит режим во время использования нашего веб-сайта?

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

window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', event => {
  if (event.matches) {
    //dark mode
  } else {
    //light mode
  }
})

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: