CSS переменные и цветовая тема для сайта в несколько строк

Один из способов использовать CSS переменные уже сегодня

Создадим сайт который динамически поддерживает светлую, тёмную и цветовые темы.

Интерактивное демо

Создаём базовый цвет который будет меняться. Привязываем его к data-theme на html.

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%)';     } }

Links:
Интерактивное демо
За идею спасибо Marcin Wichary