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.

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.

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.

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.

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.

Individual Workspaces

To apply a theme for individual workspaces:

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.

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.