> For the complete documentation index, see [llms.txt](https://docs.in8sync.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.in8sync.com/netsuite-admin-guide/theme-builder.md).

# Theme Builder

Create and manage visual themes (colour palettes, typography, and dark/light mode) that can be assigned to subsidiaries, locations, or roles

The Theme Builder lets you create and manage visual themes for <code class="expression">space.vars.productName</code>. Themes control the colour palette, typography, and overall appearance of the portal. Once created, themes can be assigned to subsidiaries, locations, or roles.

## Accessing Theme Builder

{% stepper %}
{% step %}

### Open the NetSuite Admin view

Switch to **NetSuite Admin** in <code class="expression">space.vars.productName</code>.
{% endstep %}

{% step %}

### Click Theme Builder

**Theme Builder** is in the left sidebar.
{% endstep %}
{% endstepper %}

![Theme Builder with presets, colour pickers, and live preview](https://229581143-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAG04Mxmhw6PLRAZBvhtK%2Fuploads%2Fgit-blob-4d4e6eff4822b5758b5a05e292f46d0d4b26ea5b%2Fnsadmin-theme-builder.png?alt=media)

## What a theme controls

| Element          | Description                                                                                                                               |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| **Presets**      | Pre-built colour and style combinations to start from                                                                                     |
| **Typography**   | Font family, sizes, and weights for headings and body text                                                                                |
| **Brand Colors** | Primary, secondary, accent, and destructive colours used throughout the portal. You can set separate values for light mode and dark mode. |
| **Base Colors**  | Background, foreground, card, and popover colours used throughout the portal. You can set separate values for light mode and dark mode.   |
| **Other Colors** | Other accent colours. You can set separate values for light mode and dark mode.                                                           |

## Creating a new theme

{% stepper %}
{% step %}

### Click + New Theme

You can start from scratch or choose an existing preset to build from. Starting with a preset is faster than building colors and fonts from zero.
{% endstep %}

{% step %}

### Set colours and fonts, choosing light or dark mode

For each colour field, you can set different values for light mode and dark mode. Use the **Light** and **Dark** toggle buttons to switch between modes while you edit. The preview updates as you change colors so you can see the result in real time.
{% endstep %}

{% step %}

### Name and save

Give the theme a descriptive name and click **Save as New Theme**.
{% endstep %}
{% endstepper %}

## Starting from a theme preset

Presets are pre-configured colour and typography combinations that speed up theme creation. If you use a preset as your starting point:

1. The preset's colours and fonts load into your editor.
2. You can then adjust any colour or font — in light mode, dark mode, or both.
3. Save your customized theme as a new theme; your edits don't overwrite the original preset.

This is a quick way to stay consistent with your brand while tailoring the appearance to your needs.

## Editing an existing theme

1. Find the theme in the theme list.
2. Click **Edit**.
3. Make your changes.
4. Save.

## Assigning themes

Themes are assigned in:

* [General Settings](/netsuite-admin-guide/overview/general-settings.md): for a global default theme
* [Subsidiary Branding & Default Catalog](/netsuite-admin-guide/overview-1/subsidiary-branding.md): for a subsidiary-specific theme

## Tips

* Always set a global theme in General Settings as a fallback, even if you plan to use subsidiary-specific themes.
* Set distinct light and dark colour values to optimize readability in each mode. Toggle between **Light** and **Dark** while editing to check contrast in both. If you want the same colours in both modes, set them in Light mode and they'll carry over.
* Test the theme in both light and dark mode before assigning to ensure text, buttons, and icons remain readable in both.
* Use presets as a starting point and adjust from there rather than building from scratch.
* Theme names should be descriptive; include the subsidiary or use case if themes are assigned to specific contexts (e.g. "ACME Corp - B2B", "Retail Default").

## Related Pages

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>General Settings</strong></td><td>Assign the global default theme.</td><td><a href="/netsuite-admin-guide/overview/general-settings.md">General Settings</a></td></tr><tr><td><strong>Subsidiary Branding &#x26; Default Catalog</strong></td><td>Assign a theme to a specific subsidiary.</td><td><a href="/netsuite-admin-guide/overview-1/subsidiary-branding.md">Subsidiary Branding &amp; Default Catalog</a></td></tr></tbody></table>