> ## Documentation Index
> Fetch the complete documentation index at: https://docs.polymet.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Themes

> Set your project's colors, fonts, radius and shadows once, and every page follows.

A theme is your project's colors, fonts, border radius and shadows. Change it in one place and every page and component in the project updates.

Every plan has it. If your project is linked to a design system, the theme comes from the design system and is read-only here.

![The canvas with the Theme panel open](https://mintcdn.com/polymet/TfIzLh80_L4bW9xQ/images/docs/canvas/themes-panel.png?fit=max\&auto=format\&n=TfIzLh80_L4bW9xQ\&q=85\&s=6ebe2de702337b219bd8797fa3406194)

## Quick changes

1. On the canvas, click **Theme** at the top left.
2. Change what you need:
   * **Primary color**: your main brand color.
   * **Border radius**: how round corners are.
   * **Typography**: the **Sans**, **Serif** and **Mono** fonts, whichever your project uses.
   * **Mode**: shows the preview in light or dark, so you can check both. It does not change the theme.
3. Watch the canvas nodes update as you go.
4. Click **Save Theme**. The theme is saved as a new version. **Reset** throws away unsaved changes.

In **Focus**, the palette icon in the toolbar (**Theme**) opens the same controls on the **Theme** tab of the Visual Edit panel. Save or discard them with the buttons that appear in the toolbar.

## Every setting

1. Click the **Project settings** icon next to your project's name, or **Advanced Options** in the Theme panel.
2. Open **Theming**. It has four sections. Click one to open it; **Add color** and **Add shadow** appear once their section is open.

| Section | What you set |
| - | - |
| **Colors** | Every color variable, with a light and a dark value. **Add color** creates a new one |
| **Typography** | **Font families** (**Add font** for another), **Font size**, **Font weight**, **Letter spacing** |
| **Shadows** | Shadow styles the project uses. **Add shadow** creates a new one |
| **Others** | **Border radius** |

3. Click **Save Theme**. If you changed a color that already existed, Polymet asks you to confirm, since designs using it will change.

![Project Settings on the Theming tab with the Colors section open, showing the Name, Light and Dark columns](https://mintcdn.com/polymet/TfIzLh80_L4bW9xQ/images/docs/canvas/themes-settings.png?fit=max\&auto=format\&n=TfIzLh80_L4bW9xQ\&q=85\&s=544f4bd93fdfc63ffcdbc910f094689c)

If you close the theme with unsaved changes, Polymet warns that they will be discarded.

## When you cannot edit the theme

* **Your project is linked to a design system.** The panel says "Theme is inherited from the linked design system" and names it. Change the theme in the design system itself.
* **You are looking at an older version.** Go to the latest version to edit.
* **A generation is running.** Wait for it to finish, then save.

## Theme or design system

A theme belongs to one project. A design system is its own project, with components and a theme, that you release for other projects to use. Linking one replaces the project's theme with the design system's.

## Related

* [Design systems](https://docs.polymet.ai/design-systems/overview.md) — share one look across many projects
* [Use a design system in a project](https://docs.polymet.ai/design-systems/use.md) — link, update and unlink
* [Edit visually](https://docs.polymet.ai/canvas/visual-editor.md) — change one element instead of the whole project
* [Project rules](https://docs.polymet.ai/canvas/project-rules.md) — written design guidance the agent follows


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.