# Style it to match the portal

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

Source: https://developers.thoughtspot.com/docs/tutorials/embed-data-driven-app/style-to-match-portal

# Style it to match the portal

A Liveboard that looks like a different product breaks the self-serve, built-in feeling you are going for. Start in the AI Theme Builder (**Develop** > **Customizations** > **Theme Builder**). Upload brand guidelines or describe them, generate a theme, and then fine-tune colors in Manual Mode.

Your browser does not support the video tag.

Exporting gives you a set of CSS variables that you can drop straight into `init()`:

```javascript
init({
  thoughtSpotHost: tsURL,
  authType: AuthType.None,
  customizations: {
    style: {
      customCSS: {
        variables: {
          '--ts-var-button--primary-background': '#0B5FFF',
          '--ts-var-root-color': '#1A1A1A',
          '--ts-var-root-background': '#FFFFFF',
          '--ts-var-spotter-prompt-background': '#F0F4FF',
        },
      },
    },
    content: {
      strings: {
        'Spotter': 'Ask SpotStay', //  matches the nav button copy
      },
    },
  },
});
```

Your browser does not support the video tag.

[← Previous]({{navprefix}}/tutorials/embed-data-driven-app/make-it-conversational) [Next →]({{navprefix}}/tutorials/embed-data-driven-app/wire-custom-action)