Theme builder Beta
Table of Contents
Theme Builder provides a graphical interface to explore the CSS customization options that are currently available for various ThoughtSpot components. You can try out these style customization options and get a preview of the desired look and feel before applying these changes to the ThoughtSpot components in your application environment.
In the current version, Theme Builder supports style customization options for embed components such as Liveboard, visualization, Search data page, Spotter and full ThoughtSpot app experience. The Theme Builder playground also provides an option to import and export CSS variables with custom values in JSON format.
Click Live Playgrounds > Theme Builder on this documentation site, or go to https://developers.thoughtspot.com/docs/theme-builder.
Try out styles and load changes🔗
To try out the customization options:
-
Go to Theme Builder.
-
Choose the desired embed component from the dropdown on the left panel.
-
Select the UI element or property to customize. For instance, if you want to edit the background color of the context menu, then click the dropdown for the Context Menu. Click on the text box for Background and select your desired color.
If you want to the exact variable name of the element as in ThoughtSpot, hover over the name of the element in the left panel.
-
You will see the style customizations you just applied in real time, as the iframe refreshes automatically on each customization with your selected input.
Export CSS variables in JSON format🔗
To download a copy of the CSS variables in JSON:
-
In the Theme Builder Playground, click Export JSON.
-
To copy the CSS variables, click Copy JSON.
-
To download the JSON to your local directory, click Export.
You can use this exported JSON to implement the style in your embedded ThoughtSpot instance.
Import CSS variables with custom specifications🔗
To upload CSS variables JSON:
-
In the Theme Builder Playground, click Import JSON on the bottom of the left panel.
The Import JSON modal opens.
-
Paste the JSON with your custom specifications. Currently, the Theme builder supports only the JSON styling variables.
-
Click Import.
If there are no errors, a success message appears at the bottom left and the iframe refreshes with the applied JSON.