Мультитемизация

В некоторых приложениях на одной странице может использоваться несколько тем.

Для поддержки мультитемизации на странице к верстке каждого контрола должны применяться стили из его темы. Для этого необходимо задать опцию theme для контрола.

Однако, чтобы контролы с разной опцией theme не перекрывали стили друг друга, при разработке контрола соблюдайте следующие правила.

Чтобы указать, какие из частей шаблона зависят от темы, вставьте название темы с постфиксом _theme-{{_options.theme}} в качестве класса у соответствующего элемента:

<div class="my-container_theme-{{_options.theme}}">
   <Controls.input:Text/>
</div>

В LESS-файле это будет выглядеть так:

.my-container_theme-@{themeName} {
     
   // Алиас, определенный в теме.
   background: @default-background-color; 
}

Обратите внимание, что задавать темизированные классы необходимо согласно следующим правилам:

1. Если стили не зависят от темы оформления и не содержат less-переменных (например, выравнивание или display), для них создается класс без постфикса темы:

   .controls-Button_readonly{
      cursor: default;
   }

2. И наоборот, если стили зависят от темы и содержат значения переменных, они должны задаваться на теге div с темизированным классом:

   .controls-Button_button_style-primary_theme-@{themeName} {
      border-color: @primary_border-color_button;

3. Если на одном теге div заданы оба вида стилей, необходимо создать два класса и распределить стили между ними.

   <div class="controls-Button_readonly controls-Button_button_style-primary_theme-{{_options.theme}}">
   </div>