Skip to main content

Configuring the Theme

VertiGIS Studio 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 VertiGIS Studio Web, light and dark. You can select a predefined theme and accent color with VertiGIS Studio 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 VertiGIS Studio Web Application. Each of these colors can be customized and used in custom components

tip

You can inspect the CSS of a VertiGIS Studio 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;}