Skip to main content

Configuring the Theme

VertiGIS Studio Mobile's appearance is built around two concepts: theme and layout. The theme controls the color scheme of the app, while the layout controls the organization of content.

Customizing Theme Colors​

Every color in a theme can be fully customized by editing the colors property of a theme in the branding service configuration.

note

Color properties are defined using an array of RGBA values.

{
  "schemaVersion": "1.0",
  "items": [
    ...
    {
      "$type": "branding",
      "id": "branding",
      "activeTheme": "custom-theme",
      "themes": [
        {
        "id": "custom-theme",
        "colors": {
            "primaryBackground": [
              50,
              153,
              168,
              255
            ]
          }
        }
      ]
    },
    ...
  ]
}

Theme Color Reference​

Following is a list of every possible theme color that can be used in a VertiGIS Studio Mobile Application. Each of these colors can be customized and used in custom components

note

Theme colors in mobile are added as dynamic resources.

Color accentIconBackground;
Color accentIconBackgroundHover;
Color accentIconBorder;
Color accentIconBorderHover;
Color accentIconForeground;
Color accentIconForegroundHover;
Color alertAmberBackground;
Color alertAmberBackgroundHover;
Color alertAmberBorder;
Color alertAmberBorderHover;
Color alertAmberForeground;
Color alertAmberForegroundHover;
Color alertAmberIcon;
Color alertAmberIconHover;
Color alertBackgroundDisabled;
Color alertBorderDisabled;
Color alertForegroundDisabled;
Color alertGreenBackground;
Color alertGreenBackgroundHover;
Color alertGreenBorder;
Color alertGreenBorderHover;
Color alertGreenForeground;
Color alertGreenForegroundHover;
Color alertGreenIcon;
Color alertGreenIconHover;
Color alertIconDisabled;
Color alertRedBackground;
Color alertRedBackgroundHover;
Color alertRedBorder;
Color alertRedBorderHover;
Color alertRedForeground;
Color alertRedForegroundHover;
Color alertRedIcon;
Color alertRedIconHover;
Color buttonBackground;
Color buttonBackgroundDisabled;
Color buttonBackgroundHover;
Color buttonBorder;
Color buttonBorderDisabled;
Color buttonBorderHover;
Color buttonForeground;
Color buttonForegroundDisabled;
Color buttonForegroundHover;
Color buttonIcon;
Color buttonIconDisabled;
Color buttonIconHover;
Color disabledIconFill;
Color emphasizedButtonBackground;
Color emphasizedButtonBackgroundDisabled;
Color emphasizedButtonBackgroundHover;
Color emphasizedButtonBorder;
Color emphasizedButtonBorderDisabled;
Color emphasizedButtonBorderHover;
Color emphasizedButtonForeground;
Color emphasizedButtonForegroundDisabled;
Color emphasizedButtonForegroundHover;
Color emphasizedButtonIcon;
Color emphasizedButtonIconDisabled;
Color emphasizedButtonIconHover;
Color inlineTableBorder;
Color inlineTableHeaderBackground;
Color inlineTableRowBackground;
Color inputBorder;
Color itemHoverBackground;
Color itemSelectedBackground;
Color primaryAccent;
Color primaryAccentDisabled;
Color primaryAccentHover;
Color primaryAccentLarge;
Color primaryBackground;
Color primaryBorder;
Color primaryForeground;
Color primaryForegroundDisabled;
Color secondaryBackground;
Color secondaryBorder;
Color secondaryForeground;
Color tabPrimaryForeground;
Color tabSecondaryForeground;

Relevant SDK Sample​

The VertiGIS Studio Mobile SDK Samples has an example of configuring the theme with the branding service.