@atumbochka

Как сделать, чтобы при обновлении страницы стили css, заданные с помощью js, не исчезали?

На странице я сделал кнопку, переключающую бэкграунд чёрный/белый:
const theme = document.querySelector(".theme")

theme.onclick = () => {
    if (document.body.style.background == "black") {
        document.body.style.background = "white"
        localStorage.setItem("changeTheme", [0, 1])
    } else {
        document.body.style.background = "black"
        localStorage.setItem("changeTheme", [1, 0])
    }
}


При чём, как видно, я хочу, чтобы при изменении темы на данной странице она изменялась и на других тоже. Так и происходит: я кликаю на кнопку (когда у меня белый фон), он сменяется на чёрный на этой и всех других страницах, но возникает проблема. При обновлении страницы с переключателем фон изменяется снова на стандартный (белый), а на других страницах он как был чёрным, так и остался. Как можно, скажем так, зафиксировать стиль?
  • Вопрос задан
  • 53 просмотра
Решения вопроса 2
flapflapjack
@flapflapjack
на треть я прав
Вы должны при каждом открытии страницы брать значение из localstorage, и на основании значения менять фон.
У вас же фон меняется только по клику.
Ответ написан
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Вы уже его фиксируете, записывая в LocalStorage. Просто используйте эту информацию при загрузке страницы.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы