Работа с цветами

Особого внимания заслуживают настройки цвета, поскольку они очень гибкие, и могут показаться сложными.

Цвета можно модифицировать. Меняются отдельно каналы hue, saturation и lightness и alpha.

Полный набор функций:

	Оттенок, Hue	Насыщенность, Saturation	Освещенность, Lightness	Прозрачность, Alpha
Установить	h_set	s_set	l_set	a_set
Увеличить	h_inc	s_inc	l_inc	a_inc
Уменьшить	h_dec	s_dec	l_dec	a_dec
Инвертировать	h_inv	s_inv	l_inv	a_inv

Все функции - установить (set), увеличить (inc), уменьшить (dec) и инвертировать (inv) работают одинаково со всеми каналами. Все они получают на вход число от 0 до 1.

Функция установить (set) задает значение канала.

Функции уменьшить (dec) и увеличить (inc) пропорционально уменьшают, или увеличивают значение канала.

Вот пример работы l_inc и l_dec:

background-color: {{color.l_inc(1)}}

background-color: {{color.l_inc(0.8)}}

background-color: {{color.l_inc(0.6)}}

background-color: {{color.l_inc(0.4)}}

background-color: {{color.l_inc(0.2)}}

background-color: {{color}}

background-color: {{color.l_dec(0.2)}}

background-color: {{color.l_dec(0.4)}}

background-color: {{color.l_dec(0.6)}}

background-color: {{color.l_dec(0.8)}}

background-color: {{color.l_dec(1)}}

А вот пример работы s_inc и s_dec:

background-color: {{color.s_inc(1)}}

background-color: {{color.s_inc(0.8)}}

background-color: {{color.s_inc(0.6)}}

background-color: {{color.s_inc(0.4)}}

background-color: {{color.s_inc(0.2)}}

background-color: {{color}}

background-color: {{color.s_dec(0.2)}}

background-color: {{color.s_dec(0.4)}}

background-color: {{color.s_dec(0.6)}}

background-color: {{color.s_dec(0.8)}}

background-color: {{color.s_dec(1)}}

Функция инвертировать (inv) увеличивает значение канала, если оно маленькое, и уменьшает, если оно большое.

Вот пример:

background-color: {{color.l_inc(1)}}; color: {{color.l_inc(1).l_inv(1)}}

background-color: {{color.l_inc(0.8)}}; color: {{color.l_inc(0.8).l_inv(1)}}

background-color: {{color.l_inc(0.6)}}; color: {{color.l_inc(0.6).l_inv(1)}}

background-color: {{color.l_inc(0.4)}}; color: {{color.l_inc(0.4).l_inv(1)}}

background-color: {{color.l_inc(0.2)}}; color: {{color.l_inc(0.2).l_inv(1)}}

background-color: {{color}}; color: {{color.l_inv(1)}}

background-color: {{color.l_dec(0.2)}}; color: {{color.l_dec(0.2).l_inv(1)}}

background-color: {{color.l_dec(0.4)}}; color: {{color.l_dec(0.4).l_inv(1)}}

background-color: {{color.l_dec(0.6)}}; color: {{color.l_dec(0.6).l_inv(1)}}

background-color: {{color.l_dec(0.8)}}; color: {{color.l_dec(0.8).l_inv(1)}}

background-color: {{color.l_dec(1)}}; color: {{color.l_dec(1).l_inv(1)}}

На примере выше мы сначала устанавливаем цвет фона, а затем устанавливаем цвет текста. Причем цвет текста - инвертированный цвет фона. И мы видим, что на темном фоне цвет текста белый, а на светлом - черный.

Так же у настроек цвета есть функция colorside(), которая возвращает "dark", если цвет темный, или "light", если цвет светлый. Это удобно для передачи в параметры иконок и контейнеров.

Переменная _textcolor

В _textcolor содержится цвет текста компонента. Эту переменную удобно использовать, когда необходимо сделать виджет, раскрашиваемый под цвет фона, как это делает текст.

С этой переменной можно работать так же, как и с любыми другими настройками типа Цвет.

Значение переменной определяется исходя из настроек фона компонента, и всех его родительских компонентов.