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