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

Question

[Syrone]

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

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

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

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

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)

Comments

[Aspirant555]

Меняйте содержимое самого блока с картинкой... "innerHtml", если картинка уже подгружена. Или меняйте с помощью ajax запроса.

Answer 1

[Syrone]

Спасибо за ответы, но в моем случае идеально помогли здесь - https://ru.stackoverflow.com/questions/1513763/%d0...