Знаете ли вы, что можно совмещать CSS-variables с HSL и calc?
Мы можем создавать темы для сайта, основанные на CSS-переменных. Это будет выглядеть так: все цвета мы задаём на сайте не конкретно, а абстрактно,задавая формулу, по которой в дальнейшем будет вычисляться цвет. Так изменяя всего три CSS-переменные, мы можем полностью перекрасить весь сайт. Цвета можно изменять на основе времени суток на часах пользователя или же в зависимости от его особенностей зрения. Для нас главная возможность — упростить с этим нашу работу. Задать три переменные проще, чем подключить огромный CSS-файл, который может содержать ошибки по сравнению с главной темой.
Чуть больше конкретики. Цвета в CSS можно задавать при помощи HEX-палитры (##c00), RGB-палитры (rgb(204,0,0)) и HSL-палитры (hsl(0,100%,40%)). Нас интересует сейчас именно палитра HSL. Она позволяет задавать цвет на основе трёх составляющих: Hue, Saturation и Lightness. Hue изменяет цвет от красного до фиолетового, Saturation изменяет насыщенность цвета, Lightness изменяет яркость цвета.
Мы можем хранить все три составляющие для этого цвета в HSL-палитре, что позволит нам создать несколько CSS-переменных, хранящих формулы, влияющие на эти составляющие. Рассмотрим пример такой формулы:
--primary-400: hsl(
var(--primary-h),
calc(var(--primary-s) * 1.1 * 1%),
calc(var(--primary-l) * 1.2 * 1%)
);
Число 1.1 в данном случае является множителем для насыщенности нашего цвета, а число 1.2 - множителем для яркости. Таким образом, каким бы ни было значение Hue этого цвета, в переменной
--primary-400 будет храниться немного более яркий и насыщенный оттенок.
Теперь, задавая в этом или в родительском контейнере переменные
--primary-h, --primary-s и --primary-l, мы создадим некий главный цвет, согласно которому наша формула вычислит цвет переменной
--primary-400.
Так, создадим переменные от --primary-100 до --primary-900, с соответствующими множителями для Saturation и Lightness. И, конечно же, раскрасим весь наш сайт в эти цвета.
Изменяя всего лишь три переменные, мы сможем перекрасить вообще весь сайт.
Пример кода можно посмотреть здесь:
https://codepen.io/artik-man/pen/bGdMeEe
По этому принципу построена библиотека Material Theme Creator:
https://github.com/Artik-Man/material-theme-creator, которая может генерировать из одного цвета темы, похожие на то, что предлагает Google Material Design: https://material.io/design/
Если у вас всё хорошо с английским, рекомендую очень хорошую статью по теме: https://una.im/css-color-theming/.Юна Кравец показывает, чем можно заменить препроцессорные функции работы с цветом.
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/
Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues