---
title: "Theme Builder"
framework: angular
version: "2.1.2"
---

# Theme Builder

The [Theme Builder](https://www.ag-grid.com/studio/theme-builder/) is a visual tool for building AG Studio themes. Start from a preset, adjust colours, spacing and typography across the Studio UI, grid widgets and chart widgets, and preview the result live. Export the finished theme as code to use in your application.

## Using the Theme Builder

The builder has a parameter sidebar on the left and a live preview on the right:

- **Presets** - the theme cards above the preview each apply a complete theme in one click. Every preset has a light and a dark variant, and the active variant follows the site's dark-mode toggle.
- **Parameters** - the sidebar groups common parameters into sections such as General, Header, Widgets, Grid and Charts. Adjust a colour, length or font and the preview updates immediately.
- **All Parameters** - the search box under the sidebar exposes every theme parameter Studio supports, beyond the curated sections.

## Exporting a Theme

To export the theme you've built:

1. Click the **Import / Export** button at the bottom of the sidebar.
2. The **Export** tab shows JavaScript that recreates your theme as a `studioTheme` derivation.
3. Click the copy button to copy it to your clipboard.

The exported code applies your changes on top of the default `studioTheme` using [`withParams`](https://www.ag-grid.com/studio/angular/theming#theme-params):

```js
studioTheme.withParams({
    accentColor: '#2196F3',
    backgroundColor: '#F4F7FA',
    fontFamily: 'Inter, sans-serif',
    spacing: 6,
})
```

To use it, pass the theme to the `theme` property when configuring Studio. See [Theming](https://www.ag-grid.com/studio/angular/theming/) for the full theming API.

## Importing a Theme

The **Import** tab loads existing theme code back into the builder so you can keep editing it. Paste in code exported from the builder and click **Apply**.

> **Note**
>
> Import is designed to read code produced by the Theme Builder. It still works if the code is lightly edited - adding, removing or changing values - as long as the `parameterName: value` shape is preserved. Avoid refactoring exported themes to use variable references (e.g. `accentColor: brandColors.primary`), as these can't be read back in.