09.09.2019 06:36
Amedomary 5 6000 Источник

Один из способов использовать 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

Комментарии (5)


  1. demonarxs1
    09.09.2019 10:43
    #20600397

    Привет) Классная идея! Простенько и со вкусом…
    Недавно у меня тоже была задача, добавить в имеющееся приложение темы…
    Но там параметры saturation и lightness из hsl у каждой темы отличались…
    Пришлось делать на hex + небольшие добавки из rgba, где нужна была прозрачность.
    Что то типа такого (вместе с scss):

    :root {
    --color: #CCC;
    --background: #FFF;
    --background-rgb: 0, 0, 0;
}

$color: var(--color);
$background: var(--background);
$background-rgb: var(--background-rgb);

.background-with-opacity {
    color: $color;
    background: rgba($background-rgb, $opacity);
}


    По всему проекту были использованы scss переменные, поэтому просто загнал css переменные в scss, можно было создать мапу для них и тд.

    Что-нибудь можешь подсказать для такого случая? Просто думаю можно улучшить, но что именно — в голову пока не лезет. Можно по-идее сделать так:

    :root {
    --background: 0, 0, 0;
}
$background: rgb(var(--background));
$background-rgb: rgba(var(--background-rgb), $opacity);


    Но с hex удобнее работать, почти все что нужно менять — цвета без прозрачности. С прозрачностью остаются почти всегда такими же, какие они и были.


  1. Finesse
    09.09.2019 11:01
    #20600453

    В примерах кода в статье используется не CSS, а некий препроцессор CSS. Ни в статье, ни в тегах нет указания названия этого препроцессора. Это сбивает с толку, особенно начинающих, потому что не ясно, где заканчивается синтаксис CSS и начинается синтаксис препроцессора. Хотя ничего не мешает написать примеры на простом CSS.


    Примеры кода из статьи на чистом CSS

    (те из них, которые не являются CSS-кодом)


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

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

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


    1. m1skam
      09.09.2019 16:54
      #20602341

      В вашем примере полностью корректный css код, без использования препроцессоров.


      1. Finesse
        09.09.2019 17:00
        #20602373

        Верно. Я перевёл примеры кода в статье с синтаксиса препроцессора на чистый CSS.


        1. m1skam
          09.09.2019 18:11
          #20602727

          Прошу прощения, некорректно понял ваш комментарий.