valgerofficial
@valgerofficial
Десигнер LVL100

Как сменить тему на сайте?

Доброго времени суток друзья! Как с помощью jQuery, изменить href ссылки со стилями?
Для того что бы сделать темную тему на сайте. У примеру, есть кнопка:

<button data-theme="css/main.dark.css">Темная</button>


По клику на нее, с стандартных стилей:

<link rel="stylesheet" type="text/css" href="css/main.light.css">


Они меняются на:

<link rel="stylesheet" type="text/css" href="css/main.dark.css">


И вот еще вопрос, по поводу сохранения значений? Что бы при следующем входе на сайт, у пользователя отображалась тема, которую он выбрал, либо Light либо Dark. Спасибо!)
  • Вопрос задан
  • 35 просмотров
Пригласить эксперта
Ответы на вопрос 1
Stalker_RED
@Stalker_RED
Если вы хотите сменить стили без перезагрузки, то нужно найти элемент со старыми стилями, деактивировать его
document.querySelector('link[href*="light"]').disabled=true;

и подключить другой файл
document.head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" type="text/css" href="css/main.dark.css">');


Сохранение можно сделать в localStorage
function getTheme() {
  return localStorage.getItem('theme') || 'light'; // default light
}

function toggleTheme() {
  let newTheme, oldTheme;
  if (getTheme() === 'light') {
    newTheme = 'dark';
    oldTheme = 'light';
  } else {
    newTheme = 'light';
    oldTheme = 'dark';
  }
  document.querySelector(`link[href*="${oldTheme}"]`).disabled=true;
  document.head.insertAdjacentHTML('beforeend', `<link rel="stylesheet" type="text/css" href="css/main.${newTheme}.css">`);  
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
28 июл. 2021, в 05:00
10000 руб./за проект
28 июл. 2021, в 00:00
2000 руб./за проект
27 июл. 2021, в 22:00
25000 руб./за проект