Как сделать смену темы на сайте?

Question

Делаю сайт. Хочу чтобы на нём можно было изменять тему нажатием ссылки (да, именно ссылки, так как такой стиль). Например: на сайте есть ссылка с надписью: "change theme", и при нажатии на неё тема меняется. Поскольку сайт выполнен полностью в чёрно-белых тонах, то очень желательно было бы сделать всё через параметр invert() в css.

Answer 1

ну один из способов (не знаю насколько он эффективен и уместен)

добавляем в body класс my-style-1
```
 <body class = 'my-style-1'>
```

при нажатии на ссылке меняем класс на другой

 document.querySelector('body').classList.toggle("my-style-1");
 document.querySelector('body').classList.toggle("my-style-2");

(ну или любым другим прямым способом)

все стили для разных тем прописываем в виде

 .my-style-1 классы и т.д. {
 }

 .my-style-2 классы и т.д. {
 }

а на счет

нажатием ссылки (да, именно ссылки, так как такой стиль).

то какая разница на что нажимать?

а ссылка это вообще обычный div с подчеркиванием текста и дополнительным стилем :hover

Answer 2

Если коротко, то суть такая: в обертке сайта (тег body или div) создается дополнительный класс, указывающий на выбранную тему и далее, исходя из этого класса прописываются стили. А чтобы выбранная пользователем тема никуда не сбрасывалась, ни при обновлении страницы, ни при выходе из браузера, данные о выборе записываются в local storage. Вот пример:

const themeToggle = document.getElementById('theme-toggle')
    const app = document.getElementById('app')
    //проверяем последнюю выбранную пользователем тему
    function chosenTheme() {
      if(localStorage.getItem('theme') === 'dark') {
        app.classList.add('dark');
      }
      if(localStorage.getItem('theme') === 'light') {
        app.classList.add('light');
      }
    }
    //переключаем тему по клику на ссылку
    const themeChange = () => {
      if(app.classList.contains('light')) {
        app.classList.remove('light');
        app.classList.add('dark');
        localStorage.removeItem('theme', 'light')
        localStorage.setItem('theme', 'dark')
      } else {
        app.classList.remove('dark');
        app.classList.add('light');
        localStorage.removeItem('theme', 'dark')
        localStorage.setItem('theme', 'light')
      }
    }
    themeToggle.addEventListener('click', themeChange)
    chosenTheme()

.light h1 {
      color: red;
    }

    .dark h1 {
      color: blue;
    }

<div id="app" class="light">
  <h1>Title</h1> 
  <a id="theme-toggle" class="">change theme</a>
</div>

БЛОГ НА HUSL

Как сделать смену темы на сайте?

Ответы (2 шт):