Тема Дзен

Тема оформления "Дзен" позволяет менять цвет контента областей страницы, существенную часть которых составляет изображение.

Пример

Исходный код

Для стилизации элементов, располагающихся на фоне некоторого изображения используется контейнер Controls/themes:ZenWrapper.

Подбор цвета темы осуществляется на основе двух параметров:

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

Доминантный цвет изображения определяется с помощью параметра DominantColor, который возвращает метод бизнес-логики DominantColorByURL.

Полученный цвет необходимо передать в качестве значения в опцию dominantColor.

<!-- WML -->
<Controls.themes:ZenWrapper 
    dominantColor="255, 255, 255" >
   <ws:partial template="MyModule/someContent" />
</Controls.themes:ZenWrapper>

Комплементарный цвет изображения определяется с помощью параметра ComplimentaryColor, который возвращает метод бизнес-логики DominantColorByURL.

Полученный цвет необходимо передать в качестве значения в опцию complementaryColor.

<!-- WML -->
<Controls.themes:ZenWrapper 
    dominantColor="255, 255, 255" 
    complementaryColor="178, 35, 35" >
   <ws:partial template="MyModule/someContent" />
</Controls.themes:ZenWrapper>

В зависимости от того, как был интерпретирован полученный доминантный цвет, определяется, светлая или темная тема "Дзен" будет применена для контента темизируемой области.

Яркость изображения определяется с помощью параметра IsDarkTheme, который возвращает метод бизнес-логики DominantColorByURL.

Чтобы определить, темным или светлым является доминантный цвет, установите значение для опции brightness.

<!-- WML -->
<Controls.themes:ZenWrapper 
    dominantColor="255, 255, 255" 
    complementaryColor="178, 35, 35" 
    brightness="light" >
   <ws:partial template="MyModule/someContent" />
</Controls.themes:ZenWrapper>

Исходя из яркости темы, элементы будут перекрашиваться по-разному (для тёмной темы цвет текста будет выбран из палитры светлых оттенков, а для светлой темы - из тёмных).