---
title: "Restyle an embedded widget's colors and fonts"
slug: "/help/playlists/widget-style"
tags: ["widgets","ai-mode","styling","playlists","deal-rooms"]
description: "Change an embedded widget's colors, fonts and other style settings from the toolbar in a Playlist or Deal Room, without asking AI Mode or editing code."
product: "playlists"
sidebar_label: "Widget style"
last_updated: "2026-10-29T09:34:29.626Z"
---

## Overview

**Widget style** is a toolbar control on an embedded code widget inside a Playlist or Deal Room. It opens a small form where you change the widget's colors, fonts and other style settings directly, without asking AI Mode to restyle it and without editing the widget's code.

It works on the interactive widgets AI Mode builds (ROI calculators, comparison tables, pricing tiers, quizzes and so on) and on any custom code embed whose author exposed style settings.

### Snapshot 📸

- **Feature status:** Generally available
- **Role access:** Anyone who can edit the Playlist or Deal Room
- **Location:** Playlist or Deal Room editor → select an embedded widget → **Widget style** (palette icon) in the element toolbar

---

## Open the Widget style form

1. Open a Playlist or Deal Room in the editor.
2. Click the embedded widget to select it.
3. In the element toolbar, click **Widget style** (the palette icon, next to **Edit embed code**).

A **Widget style** window opens with one control for each style setting the widget exposes.

## What you can change

The form reads the widget's own style settings and shows the right control for each one:

- **Colors:** any setting whose value is a hex color (for example `#B880FF`) gets a color picker.
- **Fonts:** any setting whose name contains "font" gets a font picker. It lists Walnut's default font plus a curated set of Google Fonts. Pick a Google Font and Walnut loads it on the widget for you.
- **Everything else:** settings like a corner radius (`12px`), a border style (`solid`) or a transparent color (`rgba(0, 0, 0, 0.5)`) get a text field. Values are checked as you type; an invalid entry shows **Enter a valid value.** and **Save** stays disabled until it's fixed.

Field labels come from the setting's name, so `accent-color` shows as **Accent color** and `text-color` as **Text color**.

## Save and cancel

- **Save** writes only the settings you changed back into the widget. Settings you didn't touch, and the widget's own HTML and JavaScript, stay exactly as they were.
- **Cancel** closes the window without applying anything.
- If you change a value and then set it back to the original, **Save** simply closes the window without writing anything.
- If the widget was rewritten while the window was open (for example, an AI Mode request finishing in the background), **Save** merges your changes into the latest version instead of overwriting it.

## Widgets with no style settings

A widget only has settings here if its author exposed them. If it hard-codes its colors and fonts, the window says:

> This widget's style is set in its own code, so it has no style settings here. Ask AI Mode to restyle it, or change its code with Edit embed code.

The only button is then **Close**. You have two options:

- Ask AI Mode to restyle the widget. It can apply the colors and fonts you ask for, or rewrite the widget so it exposes style settings.
- Click **Edit embed code** on the same toolbar and change the HTML or CSS directly.

## FAQs

**Why doesn't my widget show any settings?**
Its author didn't expose any. Ask AI Mode to restyle it, or edit the embed code directly.

**Nothing changed on the canvas until I saved. Is that normal?**
Yes. Your changes apply together when you click **Save**. **Cancel** discards them.

**Can I use any font?**
Pick from Walnut's default font and the curated Google Fonts in the list. A font that isn't in the list falls back to the widget's own font stack.

**Does Widget style use AI credits?**
No. It changes the widget's style settings directly, with no AI involved.

**Can I undo a change?**
Yes, with the editor's normal undo.

## Related resources

- [AI Mode in Deal Rooms](/help/deal-rooms/ai-mode)
- [Pages and search in Playlists](/help/playlists/pages-and-search)