Source: https://docs.amadalis.ai/composer/themes-and-tokens/ # Change site colours, fonts and themes Checked against the product’s code on 7 November 2026. Learn how to change your site colours or fonts. Open **Site** > **Catalogs** > **Themes** in the site admin. Edit a [theme](https://docs.amadalis.ai/reference/glossary/#theme)’s shared design choices, review the result and decide whether to make it active. A theme holds the design choices shared across your site. A token is one named choice, such as a text colour, heading font, spacing step or corner radius. The active theme affects the live site. Publishing one page is a separate action. ## Open the theme library 1. Open **Site**. 2. Open **Catalogs**. 3. Open **Themes**. 4. Choose **Edit** on a theme to open Theme Studio, or **New theme** to create one. A theme is **Draft** or **Active**. Only one theme is active for the site at a time. Activating another returns the previous active theme to draft. **Delete** appears only on a theme you created. It asks first with **Delete this theme?** and cannot be undone. [![Themes library shows saved theme cards and their available actions.](https://docs.amadalis.ai/images/steps/2026-11-05-coverage-and-stale/THEMES-LIBRARY-demo-store-1440.png)](https://docs.amadalis.ai/images/steps/2026-11-05-coverage-and-stale/THEMES-LIBRARY-demo-store-1440.png "Open full-size image") Opening a saved theme and activating it are separate actions. [![Delete this theme? card: Docs Walk Theme is removed from the catalog, existing pages keep rendering, with Cancel and Delete theme.](https://docs.amadalis.ai/images/steps/S016-themes-delete-this-theme-card.png)](https://docs.amadalis.ai/images/steps/S016-themes-delete-this-theme-card.png "Open full-size image") Delete appears only on a theme you created, and asks first. ## Edit tokens Theme Studio offers these sections: | Section | What it controls | | --- | --- | | **Colors** | The theme’s named colour roles. | | **Typography** | Fonts and type sizes. | | **Spacing** | The spacing scale. | | **Radius & shadows** | Corners and shadows. | | **Layout** | Shared layout values. | | **Modes** | Named sets of token overrides. | | **Developer** | The theme’s definition in JSON, a structured text format used by developers. | A mode uses the base [tokens](https://docs.amadalis.ai/reference/glossary/#token), then overrides the values it changes. Review each mode your site uses. The preview is a sample that shows the theme’s design choices. It is not a preview of one of your pages. Check a real page after making a theme active. ## Check contrast The **Colors** section shows contrast checks for specific pairs of text and background colours. These checks warn about a pair that falls below its threshold. They do not block saving. An error in the theme’s values, which the studio reports beside the preview, does block saving until it is fixed. Use them while editing, then review the actual page too. A theme check does not test every possible image, custom colour or content arrangement on that page. Review native forms in each mode too; see [Forms and replies](https://docs.amadalis.ai/site/forms-and-replies/#send-your-first-test-reply). Library themes can change the header name’s colour, menu text and button text on an accent background to suit their backgrounds. Very tight letter spacing relaxes on smaller headings. Review each mode’s button and menu colours on the real page, including the current link and links under the pointer. ## Save a draft For an existing draft, choose **Save changes**. For a new theme: 1. Enter its name. 2. Fill the **[slug](https://docs.amadalis.ai/reference/glossary/#slug)** field with lowercase words joined by hyphens, such as `studio-spring`. 3. Choose **Create theme**. Saving a draft does not activate it. Save the draft before asking to activate it so the approval card describes the stored theme. [![Themes library searched for Docs Walk, showing the Docs Walk Theme card marked Draft, source Custom, with Review and activate, Edit and Delete.](https://docs.amadalis.ai/images/steps/S016-themes-saved-draft-docs-walk-theme.png)](https://docs.amadalis.ai/images/steps/S016-themes-saved-draft-docs-walk-theme.png "Open full-size image") A saved theme waits in the library as a draft until you activate it. ## Activate a theme To switch the active theme, choose a saved draft’s **Review and activate** control and review its approval card. 1. Choose **Review and activate** on a saved draft, either on its card in the Themes list or in Theme Studio. 2. Read the approval card. It describes the theme being activated and the existing theme returning to draft. [![Activate this theme? card: 51 colour, type and layout changes and 2 mode changes, Emporium stops being the site's theme, why it asks first, and six colour tokens with their old and new values.](https://docs.amadalis.ai/images/steps/S017-themes-activate-comparison-card.png)](https://docs.amadalis.ai/images/steps/S017-themes-activate-comparison-card.png "Open full-size image") Activation shows what changes before anything restyles the site. 3. Review the token changes, then use the card’s confirmation control if you want the theme to become active. After activation, the Themes list shows a receipt with **Undo**. Undo puts the earlier active theme back. [![Receipt: Docs Walk Theme is now the site's theme, with Undo and Dismiss; the card reads Active.](https://docs.amadalis.ai/images/steps/S017-themes-activated-receipt-with-undo.png)](https://docs.amadalis.ai/images/steps/S017-themes-activated-receipt-with-undo.png "Open full-size image") After activation the receipt offers Undo. The active theme is saved now. Visitors see the change within the hour, usually much sooner. While the site’s server is down, visitors may see the previous version of a page for up to a day. Theme activation can change the appearance of many published pages without republishing each one. [![The store's Care Guide page at desktop width in the test theme: white page, blue Read the guide button.](https://docs.amadalis.ai/images/steps/S017-themes-public-page-test-theme-1440.png)](https://docs.amadalis.ai/images/steps/S017-themes-public-page-test-theme-1440.png "Open full-size image") The public site restyled by the test theme. [![The store’s Care Guide page at phone width in the test theme, with a white page and blue Read the guide button.](https://docs.amadalis.ai/images/steps/S017-themes-public-page-test-theme-390.png)](https://docs.amadalis.ai/images/steps/S017-themes-public-page-test-theme-390.png "Open full-size image") The same page on a phone. The activated theme gives the primary button a blue background and keeps the heading, buttons and picture within the phone screen. [![Themes library after Undo, with Docs Walk Theme back to Draft.](https://docs.amadalis.ai/images/steps/S017-themes-after-undo-test-theme-draft.png)](https://docs.amadalis.ai/images/steps/S017-themes-after-undo-test-theme-draft.png "Open full-size image") Undo returns the test theme to draft. [![The Care Guide page at desktop width in the store's own theme again: pale blue page, dark Read the guide button.](https://docs.amadalis.ai/images/steps/S017-themes-public-page-original-theme-restored-1440.png)](https://docs.amadalis.ai/images/steps/S017-themes-public-page-original-theme-restored-1440.png "Open full-size image") The earlier theme is live again. ## Edit an active theme carefully Choose **Save changes** after editing an active theme. If its tokens or modes have changed, a **Save to the live site?** card shows the comparison before saving. That save changes the live theme. A Theme Studio save has no **Undo**. To reverse it, change the values back and save again. Review the comparison before confirming a live design change. For a change to one section rather than the whole theme, use **Appearance** in [the Composer](https://docs.amadalis.ai/composer/composer/).