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

Проблема

Начиная с версии 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 — Стили в темной теме до адаптации

Решение

Для кастомизации клиентского интерфейса на проектном слое рекомендуется использовать новую цветовую палитру, которая создана в 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 — Стили в темной теме после адаптации

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

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

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

Цветовые палитры

Цветовая палитра для светлой темы
Цветовая палитра для темной темы