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

Question

[valgerofficial]

Доброго времени суток друзья! Как с помощью 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. Спасибо!)

Answer 1

[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">`);  
}