Skip to main content

Customize 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.


The theme can be partially configured by using the VertiGIS Studio Web Designer.


Create a Basic App#

Let's create a basic application with layout and config that we can theme.

<?xml version="1.0" encoding="UTF-8"?><layout xmlns="">  <split resizable="true">    <panel show-close-button="false" width="26">      <layer-list models="#map-primary"/>      <results-list active="false" config="results-list-config"/>      <feature-details active="true" />    </panel>    <stack>      <map id="map-primary" config="default"/>    </stack>  </split></layout>

Add Configuration for the Branding Service#

Next, we are going to add an app item to configure the Branding Service, which manages application theming.

{    "schemaVersion": "1.0",    "items": [        {            "$type": "map-extension",            "id": "default",            "onClick": [                "geometry.add-pixel-tolerance",                "tasks.identify",                "results.display-details"            ],            "webMap": ""        },        {            "$type": "results",            "id": "results-list-config",            "onFeatureClick": ["results.display-details"]        },        {            "$type": "branding",            "id": "branding"        }    ]}

Add a New Theme#

The branding service can be configured with a list of themes. Each of these themes can be based on one of the two existing themes, light or dark. Let's configure our branding service with a new dark theme with an accent color purple.

{    "schemaVersion": "1.0",    "items": [        {            "$type": "map-extension",            "id": "default",            "onClick": [                "geometry.add-pixel-tolerance",                "tasks.identify",                "results.display-details"            ],            "webMap": ""        },        {            "$type": "results",            "id": "results-list-config",            "onFeatureClick": ["results.display-details"]        },        {            "$type": "branding",            "id": "branding",            "activeTheme": "custom-theme",            "themes": [                {                    "id": "custom-theme",                    "accentColor": "purple",                    "template": "dark"                }            ]        }    ]}

Customize the Theme#

You can customize the theme by changing any of the built-in color keys used for themes.

{    "schemaVersion": "1.0",    "items": [        {            "$type": "map-extension",            "id": "default",            "onClick": [                "geometry.add-pixel-tolerance",                "tasks.identify",                "results.display-details"            ],            "webMap": ""        },        {            "$type": "results",            "id": "results-list-config",            "onFeatureClick": ["results.display-details"]        },        {            "$type": "branding",            "id": "branding",            "activeTheme": "custom-theme",            "themes": [                {                    "id": "custom-theme",                    "accentColor": "purple",                    "template": "dark",                    "colors": {                        "secondaryBackground": [249, 77, 0, 255]                    }                }            ]        }    ]}