A
A
Alexey Yakovlev2020-03-06 15:52:24
css
Alexey Yakovlev, 2020-03-06 15:52:24

Need to save the selected theme by the user, but can't figure out what to do?

There are 2 buttons - the first dark theme, the second light. It is necessary that when clicking on a certain button, the theme selected by the user is saved. Used localStorage.

The code:

// Кнопки
const darkThemeBtn = document.querySelector('.blockThemes__darkThemeBtn');
const lightThemeBtn = document.querySelector('.blockThemes__lightThemeBtn');
// Блоки
const header = document.querySelector('.header');
const mainLook = document.querySelector('.main');

lightThemeBtn.addEventListener('click', () => {
    localStorage.setItem('pressedBtnTheme', true);
});

darkThemeBtn.addEventListener('click', () => {
    localStorage.setItem('pressedBtnTheme', false);
});

if (localStorage.getItem('pressedBtnTheme')) {
    header.classList.remove('darkTheme');
    mainLook.classList.remove('darkTheme');
    header.classList.add('lightTheme');
    mainLook.classList.add('lightTheme');
} else {
    header.classList.remove('lightTheme');
    mainLook.classList.remove('lightTheme');
    header.classList.add('darkTheme');
    mainLook.classList.add('darkTheme');
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question