Create Custom Themes

Themes let you customize the look of Dashboards and Analytical Designer. You can change visual aspects such as fonts, font colors, background colors, buttons, headings, dashboard elements, and navigation.

Themes are specified by JSON structures with CSS properties. This lets you define exactly which parts of the interface you want to change.

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.

Specifics of GoodData Themes

GoodData themes don’t replace every style option. Instead, they override just the styles you specify and leave the rest unchanged from the built-in default.

  • Base theme: The built-in styles (cannot be edited)
  • Theme definition: JSON object that lists your style changes
  • Any properties not included in your theme automatically use the default styles

Example

{
  "palette": {
    "primary": { "base": "#14B2E2" }
  },
  "dashboards": {
    "content": {
      "widget": {
        "backgroundColor": "#122330"
      }
    }
  }
}

In this example:

  • The primary color changes throughout the UI
  • Dashboard widgets have a new background color
  • Everything else stays as default

You only need to define what you want to change, making themes easy and flexible to manage.

Define Themes

Decide what properties you want to change. You can update any number of properties, from just one to all of them. Properties not defined in your JSON will keep their default styles.

The easiest way to get started is to use one of the built-in theme templates. These templates provide ready-made styles and serve as a starting point for customization. You can copy a template and modify only the properties you care about.

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.

Once your JSON structure is ready, you can proceed to create your theme.

Create Themes

Follow these steps to create a theme:

  1. Go to Settings | Appearance.
  2. In the Theme section, click + Create.
  3. Type a name for your theme.
  4. Paste your JSON into the Definition field.
  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.

You can select example templates from the right side. Hover over a template and click Paste. See Theme Examples for more details.

Apply Themes

Once you have created a theme, you can apply it at the organization, workspace, or user level. The theme set in Appearance applies to all workspaces in your organization unless overridden by workspace-specific (or user-specific) themes.

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 to the entire organization:

  1. Select your theme in Appearance.
  2. Click Apply.
  3. Confirm your choice.

All workspaces in your organization will now use this theme unless a different theme is set through the API.

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

  1. Go to Workspaces and select your workspace.
  2. Open the Settings tab.
  3. 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 themes:
GET $HOST_URL/api/v1/entities/themes?sort=name&size=250&page=0
  1. Copy the theme ID you want.
  2. Apply the theme:
POST $HOST_URL/api/v1/entities/workspaces/{workspaceId}/workspaceSettings
{
  "data": {
    "type": "workspaceSetting",
    "id": "{settingsId}",
    "attributes": {
      "content": {
        "id": "{themeId}",
        "type": "theme"
      },
      "type": "ACTIVE_THEME"
    }
  }
}

Individual Users

To set a theme for a specific user:

  1. List themes:
GET $HOST_URL/api/v1/entities/themes?sort=name&size=250&page=0
  1. Copy the theme ID you want.
  2. Create the user theme settings:
POST $HOST_URL/api/v1/entities/users/{userId}/userSettings
{
  "data": {
    "type": "userSetting",
    "id": "{settingId}",
    "attributes": {
      "content": {
        "id": "{themeId}",
        "type": "theme"
      },
      "type": "ACTIVE_THEME"
    }
  }
}

Edit Themes

  1. In Appearance, click the three dots next to your theme.
  2. Select Edit.
  3. Modify the JSON definition.
  4. Click Save.

Delete Themes

You can only delete themes not applied at the organization level.

  1. Click the three dots next to the theme in Appearance.
  2. Select Delete.
  3. Confirm your choice.