# Style embedded ThoughtSpot content

> For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt)

Source: https://developers.thoughtspot.com/docs/tutorials/tse-fundamentals/lesson-10

# 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](/docs/doc-images/images/tutorials/tse-fundamentals/lesson-10-style-page.png)

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](https://developers.thoughtspot.com/docs/customize-style) 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](https://developers.thoughtspot.com/docs/custom-css).

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.

```javascript
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](https://developers.thoughtspot.com/docs/css-variables-reference) contains a list of supported variables.

### Create and apply a style sheet

The [Developer documentation](https://developers.thoughtspot.com/docs/css-variables-reference#_sample_css_file_with_variable_definitions) 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.

```javascript
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](/docs/doc-images/images/tutorials/tse-fundamentals/lesson-10-search-dark-theme.png)

### 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](https://developers.thoughtspot.com/docs/customize-icons) and [Customize text strings](https://developers.thoughtspot.com/docs/customize-text) for more information.

## Activities

1.  Look at the different options on the style settings page.
    
2.  Review the [Style customization documentation](https://developers.thoughtspot.com/docs/customize-style) for style settings.
    
3.  Create and use a custom CSS style sheet.
    

## Files changed

-   None
    

[← Previous]({{navprefix}}/tutorials/tse-fundamentals/lesson-09) [Next →]({{navprefix}}/tutorials/tse-fundamentals/lesson-11)