How to Create a Dark Theme for your GoodData Workspaces

Introduction 

The GoodData Platform allows you to create custom themes for your Workspaces, including changing colors of different UI components or using a custom font on your dashboards. 

Recently, GoodData expanded the theming capabilities to allow defining a so-called complementary color palette, which allows users to easily customize the look and feel of KPI Dashboards without defining the color for each UI component individually. You can set as little as 2 and up to 10 colors and the other colors on the dashboard will automatically adjust accordingly.

Here, I will lay out the steps to create a “dark mode” theme for a dashboard. 

For more about creating custom themes, read our documentation page. 

Defining a custom theme

The first step is to create the custom theme object on the grey pages. 

Navigate to the Metadata Object Resource url for your workspace: https://secure.gooddata.com/gdc/md/{workspace_ID}/obj

Here is a block of JSON that can be pasted into the “object definition” textbox to set a dark theme:

{
   "theme" : {
      "content" : {
         "palette" : {
            "complementary" : {
               "c0" : "#272727",
               "c9" : "#FFFFFF"
            }
         }
      },
      "meta" : {
         "category" : "theme",
         "deprecated" : "0",
         "isProduction" : 1,
         "summary" : "",
         "tags" : "",
         "title" : "Dark mode theme"
      }
   }
}

The “content” section of this JSON sets the actual configurations for the theme, and the “meta” section defines the metadata for the theme. Both sections are required. For the “content”, you can set the color for each of the supported UI components individually (read the documentation here), or you can use the complementary palette feature as shown in this example to simply set only the values “c0” (background color) and “c9” (foreground color), using their RGB hex codes, and have the platform generate complementary values for the remaining “c1” through “c8” colors. You can also manually set values for “c1” through “c8” if you don’t want the colors to be set automatically for you. Or you can set just a few of the values (for example, you can set “c0”, “c3”, and “c9” as your “anchor” colors and all the other colors will be calculated and set to values between each anchor). For a dark theme, “c0” should be your darkest color (for example, “#000000” for black or “#272727” as used in the above example for a very dark grey), and “c9” should be your lightest color (such as “#FFFFFF” for white). For more examples of theme configurations, refer to our documentation pages.

Simply copy and paste the above JSON into the textbox and click “Submit”. 

• You will then be notified that the theme was created successfully. 

• Click on the “uri” link here to navigate to the theme’s object page.

• On this page, obtain the theme’s identifier (we will use this value in the next step)

• Alternatively, you can find the theme’s identifier by navigating to: https://secure.gooddata.com/gdc/md/{workspace_ID}/query/themes

This page will list all the themes you have created. Clicking on one of the themes will navigate you to that theme’s object page, where you can find the identifier. 

Activating your custom theme

Now that you’ve created your theme, you will need to activate it for your workspace. 

• Navigate to: https://secure.gooddata.com/gdc/projects/{workspace_id}/config/ 

• Scroll to the bottom of the page and find the “Create Config” section. 

• In the “Key” field, type “selectedUiTheme” and in the “Value” field, paste your theme’s identifier. 

• Click “Create config”.

• You will then be notified that the theme was activated.

• Finally, navigate to your workspace’s dashboard to verify your theme is now active.

You’ve just created and activated a dark theme for your workspace!

Restoring the default theme

If you want to revert your workspace to GoodData’s standard theme, simply navigate to the workspace’s config page: https://secure.gooddata.com/gdc/projects/{workspace_id}/config/ 

• Scroll to the bottom of the page and, just as before, type “selectedUiTheme” in the “Key” field, but this time leave the “Value” field blank, and click “Create config”.

• This will restore the default theme for your workspace. 

• The custom theme you defined will still exist but it will no longer be activated for your workspace. You can always re-activate it by navigating back to this config page and entering “selectedUiTheme” in the “Key” field and the theme’s identifier in the “Value” field.

Additional Considerations

This article covered using the complementary palette to set the color of dashboard components, but you can also configure the border size, font, or other UI components. Refer to our theme properties documentation for a full list and explanation of the properties you can set. For more theme examples, check out our documentation page. You can always start with the examples provided and edit them to your liking, or create your own layout from scratch. 

You can create and maintain multiple themes for each workspace. As mentioned above, you can navigate to the themes grey page to see all the themes you currently have defined: https://secure.gooddata.com/gdc/md/{workspace_ID}/query/themes

Only one theme can be active at a time, and if you are maintaining multiple themes, you can easily switch between them by updating the workspace’s config page. 

You can also edit existing themes by navigating to https://secure.gooddata.com/gdc/md/{workspace_ID}/obj/{object_ID}?mode=edit. Note that the object ID in the URL here is different from the theme’s identifier and can be found in the URL of the theme’s grey page. To find it, navigate to the themes grey page: https://secure.gooddata.com/gdc/md/{workspace_ID}/query/themes. Click on the theme you want to edit to navigate to its page; the object ID is the value at the end of the URL. 

In fact, if you’ve navigated to this page, all you have to do is append “?mode=edit” to the end of the URL. Edit the values you want to change and click “Submit” to save the changes.

If you are using Lifecycle Management (LCM), you can update the theme for multiple workspaces at the same time by setting the theme for the Master workspace and then running the Rollout Brick to update all of the client workspaces. Read more about managing themes with LCM on our documentation page.