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

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

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

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

Создаём базовый цвет который будет меняться. Привязываем его к data-theme на 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%)';
    }
}

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

Автор: Максим

Источник