Переключение цветовых тем на чистом CSS
Давайте разберёмся, как реализовать переключатель цветовых тем на чистом CSS.
Начнём с разметки.
Перейдём к стилям. Разработаем «светлую» тему.
Добавим оформление для элементов. Зададим цвет фона, цвет текста, добавим декоративные элементы-линии.
Вынесем значения, которые отвечают за оформление страницы, в CSS-переменные и добавим в корневой элемент :root.
Постепенно будем менять значения CSS-свойств на новые переменные. Начнём с body.
Заменим значения свойств на CSS-переменные для статьи .post.
Заменим значения свойств на CSS-переменные для ссылки в статье.
Заменим значения свойств на CSS-переменные для подвала страницы .page-footer.
Чтобы поменять тему, просто заменим значения CSS-переменных. Подберём подходящие значения для тёмной темы.
Продолжим экспериментировать с оформлением. Снова поменяем значения переменных.
Мы «разработали» несколько цветовых тем, теперь реализуем механизм их переключения.
Добавим в разметку переключатель тем — тег <select> с классом themes, с тремя вариантами тем: тёмной, светлой и цветной.
По умолчанию выбрана тёмная тема.
Стилизуем переключатель с использованием переменных цветовой темы, чтобы он не выбивался из общего оформления.
Изменим селектор :root на :root:has(.themes [value="dark"]:checked).
Селектор проверяет, что внутри документа есть <select> с классом themes, в котором выбрана опция со значением color. При срабатывании селектора задаются значения переменных.
Как видите, пока цветовая тема не подключилась.
Чтобы селектор сработал, можно вручную поменять значение в <select> или поменять выбранную опцию в разметке. Давайте изменим разметку. Цветовая тема переключилась.
По аналогии с цветной темой добавим набор переменных для тёмной темы. И заключим их внутри селектора :root:has(.themes [value="dark"]:checked).
«Переключим» тему в разметке.
По аналогии добавим светлую тему и сразу переключимся на неё.
В финале используем возможность CSS вкладывать селекторы в селекторы и сгруппируем правила для определения переменных. Переключатель тем готов.
Убедитесь, что темы переключаются. Экспериментируйте, создавайте своим темы, делитесь с нами и друзьями.
