Создание тем CSS с помощью переменных
В стилях страницы определено несколько тем, которые содержат переменные:
/*(в пример взяты две темы)*/
:root{
--bar-bg-color: #dfe4ea;
--article-bg-color: #f1f2f6;
--text-color: #2f3542;
--header-bg-color:#eef;
}
:root[theme='redMoon'] {
--bar-bg-color: #aaaa99;
--article-bg-color: #555;
--text-color: #fff;
--header-bg-color: Darkred;
--nav-color:var(--header-bg-color);
}
/* Первая тема - условно светлая,
вторая - стилизована. */
При выборе темы корневой элемент <html> будет иметь атрибут theme="redMoon".
Затем эти переменные используются для установки стилевых свойств отдельных элементов.
Для переключения тем у кнопки через несложный код javascript
установлен обработчик нажатия, который проверяет наличие атрибута "theme"
(что будет означать, что установлена стилизованная схема).
И при наличии атрибута убирает его, а при его отсутствии, наоборот, устанавливает.
const toggleBtn = document.querySelector("#toggle-theme");
toggleBtn.addEventListener("click", function() {
if(document.documentElement.hasAttribute("theme")){
document.documentElement.removeAttribute("theme");
}
else{
document.documentElement.setAttribute("theme", "dark");
}
});
В результате при нажатии на кнопку произойдет глобальное переключение стилей веб-страницы