> Match your LiveDemo to your brand with tooltip and button colors, a Google font, tooltip arrows, hover glow and footer button style.

Canonical: https://livedemo.ai/docs/edit-a-livedemo/theme/

# Theme

Open **Custom → Theme** in the editor and turn the panel on. Settings apply to every step in the demo. Click **Save** when you're done.

| Setting | Default | Applies to |
| --- | --- | --- |
| **Step Background Color** | `#1070ff` | Tooltips and popups |
| **Text Color** | `#FFFFFF` | Tooltip and popup text |
| **Button Background Color** | `#1070ff` | Next/Back buttons |
| **Button Text Color** | `#FFFFFF` | Button labels |
| **Font Family** | Default | Hotspot, popup and button text. Any Google font |
| **Show tooltip arrow** | On | The arrow on pointer tooltips |
| **Hover glow** | On | A glow in your theme color on tooltips, hotspots and transition cards |
| **Footer buttons** | **Back and Next** | Or a single **Next Arrow** |
| **Custom Watermark** | Off | Your logo, **Company Name** and **Company Url**. See [Remove Watermark](https://livedemo.ai/docs/branding/remove-watermark/#your-own-watermark) |

While the panel is off, the demo uses the defaults.

## Tips

- Use your brand's primary color for **Step Background Color** and check that the text stays readable (a contrast ratio of 4.5:1 or more).
- Use the font from your website so the demo feels native when it's [embedded](https://livedemo.ai/docs/share/embed-on-website/).
- Popup buttons have their own colors. See [Popup buttons & effects](https://livedemo.ai/docs/edit-a-livedemo/popup-buttons-and-effects/).

---

Next: [Background](https://livedemo.ai/docs/edit-a-livedemo/background/)