sniggering_deus
@sniggering_deus
I will live forever in the flame of your eyes.

Как при выборе темы оформления сохранять выбор после перезагрузки страницы?

Как при выборе темы оформления сохранять выбор после перезагрузки страницы? К примеру есть три файла:

light.css
dark.css
yellow.css


Все три файла имеют разные стили, которые меняют оформление сайта.

Разметка примерно такая:

<ul>
<li><a>Светлый стиль</a></li>
<li><a>Тёмный стиль</a></li>
<li><a>Жёлтый стиль</a></li>
</ul>


Помогите, пожалуйста, реализовать путём клика на ссылки смену дизайна, при этом чтобы выбор сохранялся при перезагрузке страницы и при переходе на другие. Как данный функционал возможно реализовать?
  • Вопрос задан
  • 123 просмотра
Решения вопроса 2
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Ответ написан
sniggering_deus
@sniggering_deus Автор вопроса, куратор тега JavaScript
I will live forever in the flame of your eyes.
В итоге как оказалось, задача решалась очень легко, с помощью localStorage:

Это кнопки для смены тем:

<span onclick="chooseDesign(1); return false;">СВЕТЛАЯ ТЕМА</span>
 <span onclick="chooseDesign(2); return false;">ТЁМНАЯ ТЕМА</span>
 <span onclick="chooseDesign(3); return false;">ЛИМОННАЯ ТЕМА</span>
 <span onclick="chooseDesign(4); return false;">БУМАЖНАЯ ТЕМА</span>
 <span onclick="chooseDesign(5); return false;">ХОЛОДНАЯ ТЕМА</span>


Это скрипт:

const mainElement = document.getElementById('mainElement');

if (!localStorage.getItem('mystyles') || !['1','2','3','4','5'].includes(localStorage.getItem('mystyles')) ) {
localStorage.setItem('mystyles', '1');
mainElement.setAttribute('href', 'personal-theme/main-theme-1.css'); 
} else {
mainElement.setAttribute('href', 'personal-theme/main-theme-' + localStorage.getItem('mystyles') + '.css');
}

function chooseDesign(theme) {
if (theme == 1) {
mainElement.setAttribute('href', 'personal-theme/main-theme-1.css');
localStorage.removeItem('mystyles');
} else {
mainElement.setAttribute('href', 'personal-theme/main-theme-' + theme + '.css');
localStorage.setItem('mystyles', theme);
};
};


['1','2','3','4','5'] - вот тут нужно указать от одного до энного количества стилей - число. Точнее например если 5 разных стилей на выбор, нужно 5 или если их 20, указать 20 в таком же порядке как и в исходном коде.

Все стили/темы складываются в одну папку, например: personal-theme.

Имена стилей ОБЯЗАТЕЛЬНО должны заканчиваться на цифру, причём, цифры должны идти по порядку. Например: main-theme-1.css, main-theme-2.css, main-theme-3.css, main-theme-4.css, main-theme-5.css

Стили для каждой темы, вкладываются в нужные файлы, т.е в main-theme-(номер-темы).css
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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