0

У меня есть простой сайт и на нём я хочу предоставить юзерам возможность менять темы оформления, к примеру есть три файла:

light.css
dark.css
yellow.css

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

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

Помогите, пожалуйста, реализовать путём клика на ссылки смену дизайна, при этом чтобы выбор сохранялся при перезагрузке страницы и при переходе на другие. Как данный функционал возможно реализовать?

2
  • 2
    Без сервера, лучше уж использовать localStorage
    – Air
    27 авг 2019 в 2:10
  • да мне бы хоть с localstorage но чтобы работало...
    – Wonderland
    27 авг 2019 в 19:33

2 ответа 2

1

Данное решение написано на jQuery, с использованием localStorage

Для начала сделаем вёрстку в качестве меню

<!-- это в head -->
<link id="style" href="" rel="stylesheet">

<!-- это в удобное местое -->
<ul id="changeColor">
  <li data-style="light">Светлый</li>
  <li data-style="dark">Тёмный</li>
  <li data-style="knight">Рыцарь</li>
</ul>

Атрибут data-style должен быть уникален и совпадать с названием .css файла.
Это не обязательно, конечно, но так скрипт будет короче :)

Далее переходим к сценарию, тут ориентируйтесь по комментариям

// Изменение цвета и сохранение
$('#changeColor').on('click', 'li', function(){
  let style = $(this).data('style'); // Получим в переменную значение выбранного стиля

  ChangeStyle(style); // Выполняем функцию
});

// "загрузка" цвета
$(document).ready(function(){
  let loadStyle = localStorage.getItem('changeColor'); // Получим значение из localStorage
  if(loadStyle) ChangeStyle(loadStyle); // выполним функцию, если в localStorage что-то есть
});


// Функция для сохранения стиля
function ChangeStyle(style) {
  localStorage.setItem('changeColor', style); // сохраняем значение в localStorage
  $('#style').attr('href', '/'+style+'.css'); // меняем стили
}
7
  • Сначала пытался так подключить стили: <link rel="stylesheet" src="css/dark.css"/> <link rel="stylesheet" src="css/light.css"/> Не вышло. Затем вот так: <link id="style" href="css/darl.css" rel="stylesheet"> <link id="style" href="css/light.css" rel="stylesheet"> Но тоже не дало результатов. <link id="style" href="" rel="stylesheet">
    – Wonderland
    27 авг 2019 в 6:32
  • в общем абсолютно никакого результата нет...
    – Wonderland
    27 авг 2019 в 6:38
  • @МихаэльВейк, прошу прощения, ошибку допустил, я поправил.
    – De.Minov
    27 авг 2019 в 11:18
  • @СЫРок2513, я что-то не так делаю...
    – Wonderland
    27 авг 2019 в 19:28
  • 1
    Хорошо, сёдня напишу. Спасибо за то что помогаете. :)
    – Wonderland
    28 авг 2019 в 21:21
1

Создаем кнопки в html

<input value="Светлая" onclick="light()" type="button">
<input value="Темная" onclick="dark()" type="button">
<input value="Рыцарь" onclick="knight()" type="button">

Потом в html файле в котором у тебя эти кнопки должен быть подключен css файл например со светлой темой. Создай js файл и подключи его к файлу где ты создал кнопки и где у тебя подключена светлая тема. К тегу которым ты подключал css добавляешь id

<link rel="stylesheet" href="light.css" id="theme"> 

В js пишешь:

var css 
css = document.getElementById("theme");
function light(){
   css.href = "light.css";
}
function dark(){
   css.href = "dark.css";
}
function knight(){
   css.href = "knight.css";
}
11
  • А что будет после перезагрузки страницы?
    – Air
    27 авг 2019 в 2:02
  • будет светлая тема, для того чтобы была тема которую поставил пользователь нужно давать каждому пользователю какой-то id или еще что-то и записывать что пользователь с каким-то id поставил какую-то тему
    – Antonio
    27 авг 2019 в 2:06
  • 1
    @Air, в игру вступят cookie, про которые Antonio скорее всего забыл ))
    – Deonis
    27 авг 2019 в 2:06
  • да или так тоже можно
    – Antonio
    27 авг 2019 в 2:06
  • 2
    @Deonis, я бы реализовал это с помощью localStorage.....
    – Air
    27 авг 2019 в 2:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.