Темы

extra_toc

Тема позволяет кастомизировать цветовые оттенки в вашем приложении. Тема представляет собой именованный набор заранее сгенерированных ресурсов (assets), которые автоматически подхватываются компонентами. В приложениях FGX Native используется концепция цветов Material Design.

Генерация темы

Генерация темы производится в дизайнере ресурсов: "Project -> FGX Assets manager". Необходимо нажать кнопку генерации темы, расположенную на панели инструментов дизайнера. При этом открывается окно выбора параметров генерации темы. 

Здесь вы можете указать:

  1. Оттенок темы. "темная" или "светлая". Это влияет на генерацию основных цветов заднего фона форм и панелей. Если тема темная, то генерируемые цвета фонов будут темные. 
  2. Главный цвет (Primary). Главный, основной цвет в идеологии Material Design Colors.
  3. Второстепенный цвет (Secondary). Второстепенный цвет, используемый обычно для акцентирования элементов пользовательского интерфейса.
  4. Оттенок текста. Скорректировать оттенок цвета текста (темный или светлый). Оттенок текста формируется автоматически на основании Primary или Secondary цвета. Однако, вы можете его откорректировать, если считаете, что он не подходит вам.

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

Назначения цветов

С подробностями назначения цветов темы можно ознакомиться тут.

Здесь представлена только сокращенная выжимка:

  1. On Primary - группа цветов, используемых на Primary цвете. Например, TfgNavigationBar по умолчанию использует Primary цвет фона. Соответственно для текста будет использоваться цвет из этой группы Theme\On Primary\Text.
  2. On Secondary -  группа цветов, используемых на Secondary цвете. Этот цвет не используется в компонентах автоматически, так как является дополнительным. Но вы всегда можете использовать цвета из этой группы для выделения тех или иных элементов вашего интерфейса.
  3. Primary - Группа цветов Primary: Base, Light, Dark цвета. Эти цвета автоматически подхватываются компонентами. Например, TfgNavigationBar по умолчанию берет цвет фона Theme\Primary\Color.
  4. Secondary - Группа цветов Secondary: Base, Light, Dark цвета.
  5. Text - группа цветов, используемых для отображения основного текста и иконок.
  6. Background - Главная поверхность. Например фон формы.
  7. Surface - Второстепенная поверхность. Фон TfgCardPanel, TfgDrawerLayout.
  8. Error - Цвет заднего фона ошибки.
  9. On Error - Цвет содержимого, отображаемого на фоне ошибки.

Не все компоненты используют цвета из темы. Поскольку цвет зависит от контекста. Поэтому некоторые компоненты не подхватывают цвет по умолчанию. Это отдается самому разработчику.

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

Поддержка тем компонентами

Часть компонентов FGX Native автоматически считывают цвета темы, если таковые имеются. При этом, компонент берет цвет из темы только если разработчик не указал в ColorName имя другого ресурса цвета. 

Использование нескольких тем

FGX Native позволяет использовать разные темы для форм. Задание название темы осуществляется через свойство TfgForm.ThemeName. При этом, если ничего не указано в этом свойстве, то форма автоматически пытается использовать тему с именем Theme. Если среди ресурсов есть тема с указанным именем, то форма автоматически будет использовать ее для всех компонентов, в противном случае будет использовать цвета компонентов по умолчанию.

Использование темной и светлой тем

Чтобы сделать поддержку темы, нужно сгенерировать темную и светлую темы с вашими брендированными цветами. Для генерации темной темы в генераторе темы есть опция "Оттенок темы". Получив две темы, дайте им человеко понятные имена:

После этого, используя свойство TfgForm.ThemeName, вы можете указывать темную или светлую тему.