LLMs.txt: Complete documentation index for AI agents
Customize layout and styles in the UI
Cloud
26.8.0.clCloud (Latest)
26.7.0.clCloud
26.6.0.clCloud
26.5.0.clCloud
Software
26.3.0.swSoftware (Latest)
10.10.0.swSoftware
10.1.0.swSoftware
GitHub

Customize layout and styles in the UI

If you want to match the look and feel of embedded ThoughtSpot content with your core application, you can customize the ThoughtSpot application UI elements. Using style customization, you can create a uniform ThoughtSpot experience that complies with your company’s branding guidelines.

You can rebrand the ThoughtSpot interface elements such as the application logo, background color, and color scheme of visualizations.

Note

When you rebrand ThoughtSpot content, the UI styles are reset for all users.

Style components🔗

You can customize the following ThoughtSpot UI style components:

Access customization settings🔗

To access style customization settings:

  1. Log in to ThoughtSpot as an admin or a developer user.

  2. To access the ThoughtSpot Developer portal, click Develop

  3. Under Customizations, click Styles.

Note

Style customization settings are also available in the ThoughtSpot Admin tab. For more information on setting UI styles from the Admin tab, see Style Customization.

Customize application logo and favicon🔗

To upload your application logos:

  1. To access the ThoughtSpot Developer portal, click Develop.

  2. Under Customizations, click Styles.

  3. To upload the default logo:

    1. Click Application Logo (Default).

    2. Browse to your local directory and select a logo image.

      Default Application Logo
      Note

      • The accepted file formats for the logo image are jpg, jpeg, and png.

      • The recommended size for the logo is 140px by 140px. For ThoughtSpot instances using the V3 navigation and home page experience (version 26.3.0.cl or later), the logo in the top navigation bar is constrained to 28px by 28px. For best results, upload a square logo that remains clear and visible when scaled down to 28px by 28px.

    3. Verify if the logo appears correctly in the top left corner of the navigation bar.

  4. To upload a wide logo:

    1. Click the wide icon under Application Logo (Wide).

    2. Browse to your local directory and select a logo image.

      Wide application logo
      Note

      • The application logo (wide) appears on the login screen.

      • The recommended size is 250px by 50px (5:1 aspect ratio). This allows the system to preserve the aspect ratio of the uploaded logo image and prevent distortion.

      • The wide logo dimensions have changed in ThoughtSpot Cloud 26.8.0.cl and later versions. If you previously uploaded a logo sized at 330px by 100px, re-upload your logo at 250px by 50px to ensure it displays correctly on the login screen without distortion.

      • The accepted file formats for the logo image are jpg, jpeg, and png.

    3. Verify if the logo appears correctly.

Customize fonts for visualizations🔗

You can add and edit fonts to customize the appearance of your charts and tables. You can set the default fonts of your system by customizing Chart Visualization Fonts and Table Visualization Fonts.

Note
 Before you begin, make sure you have the WOFF files available for the fonts you want to use.

Important points to note🔗

  • To add a custom font, your font must be defined in a Web Open Font Format (WOFF) file.

  • Changes to chart and table defaults apply only to charts and features created after you configure a value.

  • If you change table fonts, older tables retain their previous fonts.

Update fonts🔗

To update fonts:

  1. To access the ThoughtSpot Developer portal, click Develop

  2. Under Customizations, click Styles.

  3. To update fonts for charts, go to Chart Visualization Fonts, and select a chart label.

  4. To update fonts for tables, go to Table Visualization Fonts.

    By default, the font changes are applied to all values in the table cells.

  5. To add a custom font, click +.

    The system displays the Custom Font dialog.

  6. Click the Custom Font field.

    The system displays the file finder.

  7. Add the WOFF file you want.

    The file appears in the font dialog.

  8. Click Confirm.

  9. To update the font style:

    1. Click the edit icon.

    2. Modify the font color, weight, and style.

    3. Click Confirm.

Customize background color🔗

You can customize the application background color to match your company’s color scheme. The custom background color is applied to the application interface, embedded visualizations in Liveboards and answers.

To choose a background color for the ThoughtSpot application interface:

  1. To access the ThoughtSpot Developer portal, click Develop

  2. Under Customizations, click Styles.

  3. Click the background color box under Embedded Application Background.

    Application Background Color

  4. Use the color menu to choose your new background color.

    You can also add a HEX color code.

If you have embedded the entire ThoughtSpot application in your app, you can customize the navigation panel color to match your company’s color scheme.

To choose a background color for the navigation panel:

  1. To access the ThoughtSpot Developer portal, click Develop

  2. Under Customizations, click Styles.

  3. Click the background color box under Navigation Panel Color.

  4. Use the color menu to choose your new background color.

    You can also add a HEX color code.

Customize color palette for charts🔗

You can define a set of primary and secondary colors for chart visualizations. The customized color palette is used for all visualizations in Liveboards and answers.

How chart colors work🔗

ThoughtSpot picks colors and hues in a specific order. For example, a primary color, lighter hue, and a hue that is darker than the primary color. The standard color palette in ThoughtSpot uses the following color format by default:

Primary 1 (P1)Primary 2 (P2)Primary 3 (P3)Primary 4 (P4)Primary 5 (P5)Primary 6 (P6)Primary 7 (P7)Primary 8 (P8)

Lightest 1 (L1)

Lightest 2 (L2)

Lightest 3 (L3)

Lightest 4 (L4)

Lightest 5 (L5)

Lightest 6 (L6)

Lightest 7 (L7)

Lightest 8 (L8)

Light 1 (l1)

Light 2 (l2)

Light 3 (l3)

Light 4 (l4)

Light 5 (l5)

Light 6 (l6)

Light 7 (l7)

Light 8 (l8)

Dark 1 (d1)

Dark 2 (d2)

Dark 3 (d3)

Dark 4 (d4)

Dark 5 (d5)

Dark 6 (d6)

Dark 7 (d7)

Dark 8 (d8)

Darkest 1 (D1)

Darkest 2 (D2)

Darkest 3 (D3)

Darkest 4 (D4)

Darkest 5 (D5)

Darkest 6 (D6)

Darkest 7 (D7)

Darkest 8 (D8)

Standard chart color format

ThoughtSpot applies the same format for custom color palettes. To know more about the color selection algorithm and criteria for charts, see How chart colors work.

Define a custom color palette for charts🔗

To change the color palette for charts:

  1. To access the ThoughtSpot Developer portal, click Develop

  2. Under Customizations, click Styles.

  3. Click the color box under Chart Color Palettes.

    Chart Color Palettes

  4. To choose a primary color, click the color box.

    Select Primary Color

  5. You can also add a HEX color code.

  6. To add more colors, click Add Color.

  7. To reset your chart colors to the ThoughtSpot default, click Reset.

Customize footer text🔗

You can add custom footer text to the ThoughtSpot UI.

To customize footer text:

  1. To access the ThoughtSpot Developer portal, click Develop

  2. Under Customizations, click Styles.

  3. Add the footer text in the Footer Text box.

Customize page title🔗

You can customize the page title that appears in the browser tab.

To customize the page title:

  1. To access the ThoughtSpot Developer portal, click Develop

  2. Under Customizations, click Styles.

  3. Add the page title in the Page Title box.

Related resources🔗

© 2026 ThoughtSpot Inc. All Rights Reserved.