Theme builder
Table of Contents
Theme BuilderBeta 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, and full ThoughtSpot app experience. The Theme Builder playground also provides an option to download and upload CSS variables with custom values in JSON format.
To access Theme Builder, click Live Playgrounds > Theme Builder Beta 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.
-
To view the style customizations you just applied, click Load Changes in the top-right corner.
Alternatively, you can also choose Realtime loading checkbox in the top-right corner. If you choose this, the iframe refreshes automatically on each customization with your selected input.
Download CSS variables in JSON format🔗
To download a copy of the CSS variables in JSON:
-
In the Theme Builder Playground, click Save JSON.
-
To copy the CSS variables, click Copy JSON.
-
To download the JSON to your local directory, click Download.
The CSS variables in the JSON have default values. You can edit the JSON to add custom specifications as per your Organization’s branding guidelines and upload the customized JSON to review the changes.
Upload CSS variables with custom specifications🔗
To upload CSS variables JSON:
-
In the Theme Builder Playground, click Upload JSON on the bottom of the left panel.
The Upload JSON modal opens.
-
Paste the JSON with your custom specifications.
-
Click Submit.
If there are no errors, a success message appears at the bottom left and the iframe refreshes with the applied JSON.