Style embedded ThoughtSpot content

Style embedded ThoughtSpot content

Pre-conditions🔗

You need to be logged in as a developer or administrator in ThoughtSpot to view the style page.

Changing style in the UI🔗

If you navigate to the Develop > Customizations > Styles in ThoughtSpot, you will see style customization page shown in the following figure. This page allows you to change a limited number of style options, which includes the following:

  • Change the top left logo and favicon

  • Change the color palette for charts

  • Some limited font styles such as chart labels (but not other text like names and descriptions)

  • Adding a footer for embedded text or changing the page title in the browser

Custom style page

Test the style changes thoroughly. For example, you can change the background color of the navigation menu to any color you want, but not the foreground color. So if you set it to a light color such as white or grey, users will have a hard time reading the text.

See the Style customization for more details about each setting.

Using the customizations setting🔗

The Visual Embed SDK allows you to set a custom style sheet or custom variables (or a combination of both). Full details can be found in the Developer Documentation.

The code fragment below is what’s generated if you select the Apply custom styles option in any embed. Note that the customizations can be part of the init and apply to all embeds, or part of the individual embedded object if you only want to style one object.

customizations: {
  style: {
    customCSSUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/css-variables.css", // location of your style sheet

    // To apply overrides for your style sheet in this init, provide variable values below, eg
    customCSS: {
      variables: {
        "--ts-var-button--secondary-background": "#F0EBFF",
        "--ts-var-button--secondary--hover-background": "#E3D9FC",
        "--ts-var-root-background": "#F7F5FF",
      },
    },
  },
},

The customCSSUrl allows you to specify a path to a style sheet. The URL must have an entry in the security settings for the CSP-styles. The customCSS option allows you to specify individual variables instead of a style sheet. The CSS variables reference contains a list of supported variables.

Create and apply a style sheet🔗

The Developer documentation provides an example style sheet that you can copy and modify to get started. Copy this into your own CSS file and modify as desired. Then you need to deploy it on a location that ThoughtSpot can access and make sure the URL is added to the allowlist in the Developer > Security Settings page.

The following code snippet shows an example of using a custom style sheet. This one is hosted in GitHub and uses jsdelivr as a CDN to host the file.

customizations: {
  style: {
    customCSSUrl: "https://cdn.jsdelivr.net/gh/nrentz-ts/css/dark-theme.css", // location of your style sheet
  },
}

If you apply this style and refresh the page, you get the following:

example of search with dark theme

Additional style options🔗

The majority of the style is related to colors and fonts. The custom styles also support custom sprites, such as replacing the different icons in the UI. You can also modify text strings in the embedded content, such as renaming Liveboards to Dashboard. See Customize icons and Customize text strings for more information.

Activities🔗

  1. Look at the different options on the style settings page.

  2. Review the Style customization documentation for style settings.

  3. Create and use a custom CSS style sheet.

Files changed🔗

  • None

< prev | next >