Css-Переменные И Цветовая Тема Для Сайта В Несколько Строк

Один из способов использования переменных CSS сегодня Давайте создадим веб-сайт, который динамически поддерживает светлые, темные и цветные темы.
Интерактивная демонстрация

Создайте базовый цвет, который будет меняться.
Привязываем его к data-теме на html. примеры кода используют синтаксис & из less/scss

   

 html[data-theme='green'] {
     --theme-color: 110;
 }

Теперь нам нужны сами цвета.

Вернее, их яркость и насыщенность.

Для этого мы будем использовать схему hsl. Мы помещаем все переменные в :root.

:root { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; }

Ну вот. Это небольшое дело.

Берем нужный элемент и применяем к нему нашу переменную.

.

class-name { color: var(--color); background-color: var(--background-color); }

Теперь мы изменим контраст. Замените :root на html[с атрибутом].

// :root = html html { &[data-theme-style='normal'] { } &[data-theme-style='dark'] { } }

Теперь для каждой темы берем свои значения s,l.

html { &[data-theme-style='normal'] { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; } &[data-theme-style='dark'] { --color: ~'hsl(var(--theme-color), 70%, 31%)'; --background-color: ~'hsl(var(--theme-color), 3%, 3%)'; } }

Ссылки: Интерактивная демонстрация Спасибо Марцину Вичари за идею.

Теги: #CSS #HTML #html5 #разработка веб-сайтов #css3