Как в реальном времени проверять стоит темная тема или светлая?

Рейтинг: 0Ответов: 2Опубликовано: 16.04.2023

Есть массив картинок для светлой темы и для темной. Я смог все же сделать, чтобы при смене темы на темную или светлую и обновлении страницы менялась картинка из нужного массива. Но нужно, чтобы менялась сразу при смене темы без обновлении страницы.

Было бы круто, если подсказали бы как сократить этот код:

const randomBg = document.getElementById('randomBg'),
        imagesLight = ['какие-то картинки'],
        imagesDark = ['какие-то картинки']

const imgCountDark = imagesDark.length,
        numberDark = Math.floor(Math.random() * imgCountDark),
        imgCountLight = imagesLight.length,
        numberLight = Math.floor(Math.random() * imgCountLight)

Что нужно написать здесь, чтобы менялось сразу, а не после обновления страницы?

const getCurrentBg = () => document.body.classList.contains(darkTheme) ? window.onload = function() {
    randomBg.style.backgroundImage = `url(${imagesDark[numberDark]})`
} : window.onload = function() {
    randomBg.style.backgroundImage = `url(${imagesLight[numberLight]})`
}
javascript
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

  1. В функции getCurrentBg в тернарнике оставить только строки, задающие background, без всяких обёрток в виде window.onload = function() {

  2. Отдельно вне функции getCurrentBg сделать её вызов при перезагрузке, т.е.

    window.onload = () => { getCurrentBg() }

  3. При клике на ссылку или кнопу смены темы тоже вызывать функцию getCurrentBg()

▲ 0

Можно использовать MediaQueryList

В примере ниже функция screenTest вызывается сразу же при изменении темы

const mql = window.matchMedia("(prefers-color-scheme: dark)");

function screenTest(e) {
  const para = document.querySelector("p");
  if (e.matches) {
    para.textContent = "Current theme: dark";
  } else {
    para.textContent = "Current theme: light";
  }
}

mql.addEventListener("change", screenTest);
screenTest(mql);
body {
  color: #530;
  background-color: #fed;
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #ffe;
    color: #000;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #234;
    color: #fec;
  }
}
<p>Current theme: ????</p>