Адаптация интерфейса под темную тему

Продвинутый

Проблема

Начиная с версии 1.8 в BPMSoft доступно переключение на темную тему интерфейса. В связи с этим возможны сценарии некорректного отображения пользовательских стилей на клиентских схемах при переключении тем.

Например, в разделе «Контакты» настроены стили отображения записей реестра раздела согласно примеру в статье Настроить стили отображения записей реестра раздела:

				 Пример настройки стилей отображения записей реестра раздела
			

			 define("ContactSectionV2", [], function() {
	return {
		entitySchemaName: "Contact",
		methods: {
			prepareResponseCollectionItem: function(item) {
				this.callParent(arguments);
				item.customStyle = null;
				item.customStyle = {
					"border": "2px solid #000000"
				};
			}
		}
	};
});
		

 
	

Для каждой записи в реестре добавлены границы черного цвета.

Рисунок 1 — Стили в светлой теме

При переключении на темную тему цвет границ сольется с общим фоном.

Рисунок 2 — Стили в темной теме до адаптации

Аналогичные проблемы с восприятием и читаемостью могут возникать и у no-code элементов:

Правил цветового выделения;
Дашбордов (показателей, шкал, графиков);
Цвета панели разделов;
Angular-модулей и так далее.

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

Решение

Для кастомизации клиентского интерфейса на проектном слое рекомендуется использовать новую цветовую палитру, которая создана в BPMSoft версии 1.8. Она состоит из переменных, значения которых подстраиваются под выбранную тему, и не подлежит изменению. Файлы со стилями представлены в разделе Цветовые палитры.

Некоторые переменные в обеих темах в цветовой палитре имеют одинаковые значения.

Для адаптации цвета границ текущего примера выберем переменную --border-color-primary:

				 Адаптированный пример настройки стилей отображения записей реестра раздела
			

			 define("ContactSectionV2", [], function() {
	return {
		entitySchemaName: "Contact",
		methods: {
			prepareResponseCollectionItem: function(item) {
				this.callParent(arguments);
				item.customStyle = null;
				item.customStyle = {
					"border": "2px solid var(--border-color-primary)"
				};
			}
		}
	};
});
		

 
	

В светлой теме значение переменной будет равно #252525 (черный цвет), а для темной темы — #FFF (белый цвет).

Рисунок 3 — Стили в темной теме после адаптации

Для no-code элементов (правила цветового выделения, дашборды, цвета панели и т. д.), механизм автоматического подстраивания системной переменной отсутствует. Поэтому при выборе цветов важно самостоятельно проверять их сочетаемость с обеими темами. Рекомендуем выбирать универсальные цвета, избегать слишком светлых или темных оттенков и проверять результат после переключения темы.

В правилах цветового выделения особое внимание уделяйте явному указанию цвета шрифта при заданном фоне. Подробнее: Правила цветового выделения.

Дополнительные рекомендации

При реализации пользовательских стилей на проектном слое рекомендуется:

Связывать элементы с цветовой гаммой, заливкой и другими характеристиками через переменную. Это обеспечит правильное отображение элементов в обеих темах.
Картинки и иконки с цветным фоном (например, белым) лучше заменить на версии с прозрачным фоном в форматах .png или .svg. Это предотвратит некорректное отображение фона на одной из тем.
Иконки для светлой и темной тем должны быть одинаковыми, без изменения цвета, так как нет механизма для автоматической смены иконок при переключении тем. Используйте иконки, которые гармонично смотрятся как на светлой, так и на темной теме.