Configuring the Theme

Geocortex 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 Geocortex 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 Geocortex Mobile SDK Samples has an example of configuring the theme with the branding service.

Edit this page