Как сделать переключение тем на js?

Question

[Алексей Королёв]

Перелопатил гору готовых скриптов, но на практике рабочих так и не нашёл для своего проекта. Подскажите на практическом примере, как можно сделать смену темы с сохранением в localStorage

У меня есть 2 стилизации с цветами под светлую и тёмную тему:

<!-- <link href="{THEME}/css/theme_light.css" type="text/css" rel="stylesheet"> -->
   <link href="{THEME}/css/theme_dark.css" type="text/css" rel="stylesheet">

и переключатель в виде кнопки

<button type="button" class="btn btn-primary">Включить тёмную тему</button>

Comments

[Сергей delphinpro]

https://qna.habr.com/q/1164862

Answer 1

[Александр Талалаев]

Объедините стили в один файл. По нажатию кнопки на body вешайте доп стиль для тёмной темы, например "theme-name_dark", ну и в css советующие изменения по наследованию.

Answer 2

[black1277]

Вот один из вариантов

Comments

[Алексей Королёв]

А как быть с localStorage? Чтобы выбранная тема сохранялась?

[black1277]

Алексей Королёв, не думал что это может вызвать трудность. Ок, обновил код, теперь сохраняется в localStorage.

Answer 3

[Dino Winchester]