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

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

Для поддержки мультитемизации на странице к верстке каждого контрола должны применяться стили из его темы. Для этого необходимо задать опцию 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>