Configuring the Theme

Geocortex Web'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.

Seeding a New Theme from an Existing Theme

Two predefined themes are included with Geocortex Web, light and dark. You can select a predefined theme and accent color with Geocortex Web Designer.

The branding service is responsible for the theming of the application. To select a theme and accent color from within the config, you can configure the branding service. The template property is used to specify the base theme to seed colors from.

{
"schemaVersion": "1.0",
"items": [
...
{
"$type": "branding",
"id": "branding",
"activeTheme": "custom-vampire",
"themes": [{
"id": "custom-vampire",
"accentColor": "red",
"template": "dark"
}]
},
...
]
}

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.

tip

Colors can be specified with their common name, a hex value, or a rgba value. A full list of all the color keys available in a theme can be found here.

{
"schemaVersion": "1.0",
"items": [
...
{
"$type": "branding",
"id": "branding",
"activeTheme": "custom-vampire",
"themes": [{
"id": "custom-vampire",
"accentColor": "red",
"template": "dark",
"colors": {
"emphasizedButtonBackground": "purple",
"primaryAccentLarge": "#00b7eb",
"secondaryBackground": [249, 77, 0, 255]
}
}]
},
...
]
}

Theme Color Reference

Following is the interface that declares every possible theme color that can be used in a Geocortex Web Application. Each of these colors can be customized and used in custom components

tip

You can inspect the CSS of a Geocortex Web Application to determine what theme property a specific element uses.

export interface BrandingColors {
accentIconBackground: ColorConfig;
accentIconBackgroundHover: ColorConfig;
accentIconBorder: ColorConfig;
accentIconBorderHover: ColorConfig;
accentIconForeground: ColorConfig;
accentIconForegroundHover: ColorConfig;
alertAmberBackground: ColorConfig;
alertAmberBackgroundHover: ColorConfig;
alertAmberBorder: ColorConfig;
alertAmberBorderHover: ColorConfig;
alertAmberForeground: ColorConfig;
alertAmberForegroundHover: ColorConfig;
alertAmberIcon: ColorConfig;
alertAmberIconHover: ColorConfig;
alertGrayBackground: ColorConfig;
alertGrayBackgroundHover: ColorConfig;
alertGrayBorder: ColorConfig;
alertGrayBorderHover: ColorConfig;
alertGrayForeground: ColorConfig;
alertGrayForegroundHover: ColorConfig;
alertGrayIcon: ColorConfig;
alertGrayIconHover: ColorConfig;
alertGreenBackground: ColorConfig;
alertGreenBackgroundHover: ColorConfig;
alertGreenBorder: ColorConfig;
alertGreenBorderHover: ColorConfig;
alertGreenForeground: ColorConfig;
alertGreenForegroundHover: ColorConfig;
alertGreenIcon: ColorConfig;
alertGreenIconHover: ColorConfig;
alertRedBackground: ColorConfig;
alertRedBackgroundHover: ColorConfig;
alertRedBorder: ColorConfig;
alertRedBorderHover: ColorConfig;
alertRedForeground: ColorConfig;
alertRedForegroundHover: ColorConfig;
alertRedIcon: ColorConfig;
alertRedIconHover: ColorConfig;
alertBackgroundDisabled: ColorConfig;
alertBorderDisabled: ColorConfig;
alertForegroundDisabled: ColorConfig;
alertIconDisabled: ColorConfig;
buttonBackground: ColorConfig;
buttonBackgroundDisabled: ColorConfig;
buttonBackgroundHover: ColorConfig;
buttonBorder: ColorConfig;
buttonBorderDisabled: ColorConfig;
buttonBorderHover: ColorConfig;
buttonForeground: ColorConfig;
buttonForegroundDisabled: ColorConfig;
buttonForegroundHover: ColorConfig;
buttonIcon: ColorConfig;
buttonIconDisabled: ColorConfig;
buttonIconHover: ColorConfig;
disabledIconFill: ColorConfig;
emphasizedButtonBackground: ColorConfig;
emphasizedButtonBackgroundDisabled: ColorConfig;
emphasizedButtonBackgroundHover: ColorConfig;
emphasizedButtonBorder: ColorConfig;
emphasizedButtonBorderDisabled: ColorConfig;
emphasizedButtonBorderHover: ColorConfig;
emphasizedButtonForeground: ColorConfig;
emphasizedButtonForegroundDisabled: ColorConfig;
emphasizedButtonForegroundHover: ColorConfig;
emphasizedButtonIcon: ColorConfig;
emphasizedButtonIconDisabled: ColorConfig;
emphasizedButtonIconHover: ColorConfig;
inlineTableHeaderBackground: ColorConfig;
inlineTableRowBackground: ColorConfig;
inlineTableBorder: ColorConfig;
inputBorder: ColorConfig;
itemSelectedBackground: ColorConfig;
itemHoverBackground: ColorConfig;
none: ColorConfig;
panelBorder: ColorConfig;
primaryAccent: ColorConfig;
primaryAccentDisabled: ColorConfig;
primaryAccentHover: ColorConfig;
primaryAccentLarge: ColorConfig;
primaryBackground: ColorConfig;
primaryBorder: ColorConfig;
primaryForeground: ColorConfig;
primaryForegroundDisabled: ColorConfig;
secondaryBackground: ColorConfig;
secondaryBorder: ColorConfig;
secondaryForeground: ColorConfig;
tabPrimaryForeground: ColorConfig;
tabSecondaryForeground: ColorConfig;
}
Edit this page