Темизация приложения

Темы Q.Palette основываются на CSS Custom Properties (opens in a new tab), что позволяет нам динамически менять темы приложения без перезагрузки страницы и рекомпиляции приложения. Для цветов Q.Palette зарезервирован префикс--q-, так что при создании собственных переменных, учитывайте этот факт.

Создание собственных тем

Для внедрения продукта в сторонние компании, где имеется свой брендбук, разработан механизм темизации собственных элементов в соответствии с палитрой компонент Q.Palette.

Для смены темы необходимо:

В рутовом приложении в папке src/assets/themes нужно создать css файл с будущей темой, например my-theme.css.
В файле, предназначенном для настройки темы, в селекторе необходимо указать соответствующий id:

Далее можно задать нужным переменным специализированные под клиента цвета:
Следующим шагом необходимо добавить созданную тему в config.base.json:
Чтобы получить весь список доступных цветовых переменных, необходимо зайти в Инструменты разработчика > Элементы > Стили, найти селектор html и скопировать весь список переменных в соответствующий файл.

Настройка через конфигурацию

Для управления темизацией приложения в конфигурации добавлен специальный разделtheme(см. раздел config.json). С его помощью можно установить единственную тему и/или цветовую схему приложения без возможности последующего изменения Вthemeдоступно указать тему, которая будет отображаться у пользователя при первом посещении, а также задать кастомный список тем.

Алгоритм применения тем:

Если в конфигурации отсутствуют настройка темы или список тем, то для приложения будет установлен список тем по умолчанию.
Тема, указанная в theme.theme, будет автоматически установлена у всех пользователей без возможности её переключения на панели настроек. То же самое касается цветовой схемы.
Механизм предусматривает сравнение выбранной пользователем темы, которая считывается из Local Storage, и установленным списком тем. Если у пользователя установлена тема, которая задана в обновленном списке тем, то он не заметит данного обновления, поскольку для него ничего не меняется. В противном случае будет установлена либо дефолтная тема из конфигурации, либо первая из списка.