Create Custom Themes

To customize the look of Dashboards and Analytical Designer, you can define a theme for your workspace.

Themes are JSON structures with CSS properties. You can use these properties to customize the visual elements, such as buttons, headings, dashboard content, and navigation.

Side-by-side comparison of two dashboards. The left dashboard uses the default theme, while the right dashboard uses a custom theme with different headings and lighter background.

You can apply a theme for the whole organization through the user interface in the Appearance section. All workspaces in this organization then inherit the theme.

Appearance section in the Settings tab with a highlighted Theme row. The Indigo theme is applied and a Change button is located on the right side of the row.

To use a custom theme, you must:

  1. Define the JSON structure.
  2. Create a theme in the Appearance section of your organization with this JSON.
    You can create multiple themes and then apply the one theme you want to use.
  3. Apply the theme.

Define Themes

Based on your requirements, define the properties that you want to update.

You can update any number of the properties (only one, or a subset, or all of them). The properties that you do not define in the JSON structure remain intact.

If you have the structure prepared, proceed to create.

Create Themes

To create a custom theme:

  1. Go to the Appearance section in your workspace.
  2. In the Theme section, click + Create.
  3. Type a name for your themes.
  4. In the Definition, paste the JSON structure that you created.
  5. Click Save.
Create custom theme dialog with a text field for entering the name of the theme, a large code editor area filled with a JSON definition, and a list of example templates.

On the right side of the dialog window, you can find example templates - hover over the template and click Paste to paste the JSON directly in the Definition section. See Theme Examples for details.

Apply Themes

The theme that you apply in the Appearance section is applied to all workspaces in your organization. However, you can enable a different theme for individual workspaces via API.

The following image shows the hierarchy and how themes are inherited.

Diagram showing the hierarchy of theme inheritance. At the top, the Organization has Theme 1 set as an entity setting. Its first workspace inherits Theme 1, the second workspace has Theme 2 set directly as an entity setting. The second workspace has two child workspaces. One inherits its theme from the parent workspace above, therefore also uses Theme 2, the other has theme 3 set directly as an entity setting.

Whole Organization

To apply a theme for the whole organization:

  1. Select the theme in the Appearance section.
  2. Click Apply.
  3. Confirm.

From now on, all the workspaces in your organization will use this theme.

Workspaces with individually specified themes via API are not affected by these settings.

Theme selection dialog with a list of themes. A custom theme is selected, indicated by a radio button on the left, and the Apply button in the lower right corner is highlighted.

Individual Workspaces

To apply a theme for individual workspaces:

Go to the Workspaces tab and open the workspace you want to edit. Open the Settings tab and click Change in the Theme section.

Appearance section in the Settings tab of a workspace showing the Theme setting with the currently selected theme. The Change button is located to the right of the theme name.
  1. List all the themes in your organization.
    GET $HOST_URL/api/v1/entities/themes?sort=name&size=250&page=0
  2. Select the theme that you want to use and copy its id (identifier).
  3. Apply the theme with the following :
    POST $HOST_URL/api/v1/entities/workspaces/{workspaceId}/workspaceSettings

    {
    "data": {
        "type": "workspaceSetting",
        "id": "{settingsId}",
        "attributes": {
            "content": {
                "id": "{themeId}",
                "type": "theme"
            },
            "type": "ACTIVE_THEME"
        }
    }
}

From now on, this workspace will use this theme that you applied regardless of the organization settings in the Apperance section.

Individual Users

To apply a theme for individual users:

  1. List all the themes in your organization.
    GET $HOST_URL/api/v1/entities/themes?sort=name&size=250&page=0
  2. Select the theme that you want to use and copy its id (identifier).
  3. Create the theme user settings:
    POST $HOST_URL/api/v1/entities/users/{userId}/userSettings

    {
    "data": {
        "type": "userSetting",
        "id": "{settingId}",
        "attributes": {
            "content": {
                "id": "{themeId}",
                "type": "theme"
            },
            "type": "ACTIVE_THEME"
        }
    }
}

From now on, this user will use this theme that you applied regardless of the organization or workspace settings in the Apperance section.

Edit Themes

  1. In the Appearance section, click the three dots next to the theme name.
  2. Select Edit.
  3. Make your changes.
  4. Click Save.
Theme selection dialog showing custom themes. Theme 1 is selected, and the ellipsis button to the right of it is highlighted. A dropdown menu is open with options to Edit and Delete the theme.

Delete Themes

You can delete only themes that are not applied on the organization level.

Individual workspaces that use the deleted themes will be changed to the default Indigo theme.

To delete a custom theme:

  1. In the Appearance section, click the three dots next to the theme name.
  2. Select Delete.
  3. Confirm.
Theme Properties