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

Question

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

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

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]})`
}

Answer 1

В функции getCurrentBg в тернарнике оставить только строки, задающие background, без всяких обёрток в виде window.onload = function() {
Отдельно вне функции getCurrentBg сделать её вызов при перезагрузке, т.е.
```
window.onload = () => { getCurrentBg() }
```
При клике на ссылку или кнопу смены темы тоже вызывать функцию getCurrentBg()

Answer 2

Можно использовать 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>

БЛОГ НА HUSL

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

Ответы (2 шт):