В зависимости от вашего процесса сборки и требований для старых браузеров, например ie11.
Темы становятся проще с css настраиваемыми свойствами (css переменными). Основная идея c состоит в том, что у вас есть свои переменные, и при изменении темы вы меняете цвет переменных.
В моем самом основном c примере происходят следующие вещи и почему.
- На уровне root установите переменные для вашей темы по умолчанию.
- У вас есть класс с описанием темы, в моем примере это
.dark-theme - Установить class на теле, когда темная тема активна с js, или обратная передача в зависимости от вашего бэкэнда и желаемого подхода. В моем примере я делаю это с помощью js.
Здесь происходит то, что в .dark-theme мы меняем переменные на цвета темной темы. Это основы, и вы далеко уйдете.
Просто примечание, подход к сохранению темы зависит от того, какой у вас сайт SPA, Wordpress,. NET и т. Д. Я видел упоминания о сохранении его в базе данных и в пользователе, это не годится, если у вас нет подписи пользователя. Один из подходов - сохранить его в локальном хранилище браузеров и прочитать его при загрузке страницы.
const themeSwitcherButton = document.querySelector('.js-theme-switcher')
themeSwitcherButton.addEventListener('click', function() {
const body = document.querySelector('body')
if (body.classList.contains('dark-theme')) {
body.classList.remove('dark-theme')
} else {
body.classList.add('dark-theme')
}
})
:root {
--primary-color: deepskyblue;
}
body.dark-theme {
--primary-color: deeppink;
}
.block {
margin-bottom: 3rem;
padding: 2rem;
background-color: var(--primary-color);
}
<body>
<p class="block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos odio atque excepturi, aut voluptate. Similique autem, eos rem cum tenetur perspiciatis voluptatibus reprehenderit cumque, inventore, nam laudantium fugiat molestias eveniet sit commodi deleniti. Ipsa eum animi, excepturi tempore placeat.
</p>
<button class="js-theme-switcher">Theme switcher</button>
</body>