От автора: настраиваемые сайты. Я уверен, вы имели с ними дело и раньше. Настройка сайта дает пользователю возможность адаптировать его. Как будто пользователи могут им управлять. Ниже приведён наш базовый пример.
Итак, насколько легко это можно сделать с помощью переменных CSS? Давайте посмотрим. Это будет занимательно! Вам понравится.
Обратите внимание: Эта статья является отрывком из Профессионального руководства по CSS (платный курс из 85 уроков). Советую его пройти. Вот такая бессовестная реклама 
Что мы на самом деле хотим сделать
Прелесть переменных CSS заключается в их обратной связи. Как только они обновляются, независимо от того, какое свойство принимает значение от переменной CSS, оно тоже обновляется. Ниже представлено изображение, поясняющее данный принцип.
Очевидно, нам понадобится Javascript для прослушивателя кликов. В этом простом примере фон и цвет текста всей страницы определяется на основе переменных CSS. Когда вы кликаете на любую кнопку вверху, она задает для переменной CSS другой цвет. В результате, изменяется фон страницы.
Ну, по этой теме всё. Ой, ещё кое-что. Когда я говорю, что переменной CSS задаётся другое значение, как это происходит?
Переменные CSS будут оказывать влияние даже тогда, когда они заданы во встроенных стилях. С помощью Javascript мы можем получить корневой документ и задать новое значение для встроенной переменной CSS. Это понятно? Меньше разговоров, давайте займёмся делом.
Исходная разметка
Вот так выглядит нужная нам исходная разметка:
<div class="theme"> <button value="dark">dark</button> <button value="calm">calm</button> <button value="light">light</button> </div> <article> ... </article>
Эта разметка состоит из трёх кнопок внутри родительного элемента.theme. Для краткости я обрезал содержимое внутри элемента article. Внутри этого элемента article находится содержимое страницы.
Стили страницы
Этот проект начинается со стилей страницы. Здесь всё просто. Вместо того, чтобы постоянно настраивать background-color и color страницы, мы сделаем так, чтобы они основывались на переменных. Вот, что я имею в виду.
body { background-color: var(--bg, white); color: var(--bg-text, black)
}
Причина этого довольно проста. На какую бы кнопку мы не нажимали, мы изменим значения обеих переменных внутри документа. В результате этого изменения будут обновлены общие стили станицы. Проще простого.
Итак, давайте продолжим и приступим к обновлению из Javascript.
Переходим к Javascript
Дальше я собираюсь задать Javascript, необходимый для этого проекта.
const root = document.documentElement const themeBtns = document.querySelectorAll('.theme > button')
themeBtns.forEach((btn) => { btn.addEventListener('click', handleThemeUpdate)
})
function handleThemeUpdate(e) { switch(e.target.value) { case 'dark': root.style.setProperty('--bg', 'black') root.style.setProperty('--bg-text', 'white') break case 'calm': root.style.setProperty('--bg', '#B3E5FC') root.style.setProperty('--bg-text', '#37474F') break case 'light': root.style.setProperty('--bg', 'white') root.style.setProperty('--bg-text', 'black') break }
}
Пусть это вас не пугает. На самом деле, всё гораздо проще, чем кажется. Во-первых, у нас есть ссылка на корневой элемент, const root = document.documentElement
Корневым элементом здесь является элемент HTML. Скоро вы поймёте, почему это так важно. Если вам любопытно, это нужно для того, чтобы задать новое значение переменной CSS.
Кроме этого, у нас есть ссылка и на кнопки, const themeBtns = document.querySelectorAll(‘.theme > button’)
querySelectorAll задает массив в виде структуры данных, которые мы можем обработать через цикл. Выполните перебор каждой из кнопок и добавьте к ним прослушивателя событий, а именно клика. Что мы получаем:
themeBtns.forEach((btn) => { btn.addEventListener('click', handleThemeUpdate)
})
Где функция handleThemeUpdate? Это мы и обсудим. Каждая кнопка после нажатия будет иметь handleThemeUpdate в качестве функции обратного вызова. Важно учесть, какая кнопка была нажата и потом выполнять нужную операцию.
С учётом вышесказанного, используется переключатель operator и осуществляются операции, основанные на значении кнопки, которая была нажата. Просмотрите ещё раз блок кода Javascript, это поможет вам лучше разобраться. Просмотреть проект полностью вы можете на codepen.
Автор: Ohans Emmanuel
Источник: https://codeburst.io/
Редакция: Команда webformyself.