# 6. Working with themes

Buzzy AI v3 apps come with a powerful theming system. Every app starts with a default theme, and you can customise it — or switch to an entirely different one — via AI prompts or the Theme editor tab.

## Theming with AI

You can ask Buzzy AI to make theme changes in natural language. The AI will decide the best course of action — whether that's tweaking a few variables, toggling dark mode, or rebasing your entire theme on a different default.

**What AI can do with themes:**

| Action                           | When it's used                                                          | Example prompt                                                    |
| -------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------- |
| **Choose a starting theme**      | On app creation, AI picks a suitable default based on your prompt       | *"Build a wellness tracker app with a calm, natural look"*        |
| **Customise the starting theme** | On app creation with specific style guidance                            | *"Start with the Zen theme but use orange as the primary colour"* |
| **Update specific parts**        | Refine colours, typography, shadows, or borders without switching theme | *"Use a warm grey background with softer shadows and no borders"* |
| **Toggle light/dark mode**       | Switch between light and dark mode                                      | *"Switch to dark mode"*                                           |
| **Switch to a different theme**  | Rebase onto a completely different named default theme                  | *"Switch to the Slate theme"*                                     |
| **Reset to default**             | Revert all customisations back to the basic Buzzy default               | *"Reset theme to default"*                                        |

**More example prompts:**

* *"Switch to the Fashion theme"*
* *"Make it light mode"*
* *"Use blue as the primary colour"*
* *"Give it a softer, rounder look with subtle shadows"*
* *"Switch to the Stone theme but keep our brand colour"*
* *"Revert to the default dark mode theme"*

## Available default themes

Buzzy ships with several built-in named themes. Each is available in both **light** and **dark** variants. When no specific theme is requested, Buzzy uses the **Neutral** theme as a starting point.

| Theme       | Description                                                                                                                 | Best suited for                                        |
| ----------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| **Neutral** | Clean, basic monochromatic theme with no shadows and elegant use of borders and whitespace. Good default or starting point. | AI, tech, corporate, enterprise, consumer, prototyping |
| **Zinc**    | Softer, approachable theme with rounded corners and soft shadows. Friendly, modern look.                                    | Consumer apps, lifestyle, productivity                 |
| **Slate**   | Cool, crisp theme with sharp corners and a cyan accent. Information-dense and efficient.                                    | Dashboards, SaaS, developer tools, data-heavy apps     |
| **Stone**   | Warm, earthy, natural theme with a strong, approachable feel.                                                               | Hospitality, food, service                             |
| **Zen**     | Calm, meditative, gentle theme. Softer than Stone, with generous rounding and no borders.                                   | Health, wellness, meditation, mindfulness              |
| **Fashion** | High-contrast black-and-white editorial theme with sharp edges, solid borders, and no shadows.                              | Fashion, online stores, blogs, media, journalism       |
| **Air**     | Bright, neutral theme with large rounded corners, soft depth, and restrained coral accents.                                 | Booking flows, hospitality, travel, marketplaces       |

## The Theme tab in the editor

You can also view and fine-tune your app's theme manually via the **Theme** tab in the workspace editor's left-hand navigation panel. The Theme tab gives you direct control over:

* **Dark mode** — Toggle between light and dark mode.
* **Brand colours** — Set your primary, link, info, success, warning, and danger colours.
* **Scheme colour** — The foundational base colour from which many UI colours are derived.
* **Typography** — Configure font families (primary, secondary, code), base font size, weight, line height, and heading styles.
* **Border radius** — Control the roundness of UI elements (from sharp to fully rounded).
* **Shadows** — Enable or disable shadows, and adjust offset, blur, spread, and opacity.
* **Borders** — Configure border visibility, colour, and luminosity.
* **Body background** — Adjust the overall page background colour or luminosity.

Changes made in the Theme tab apply globally across all screens in your app. You can mix manual theme edits with AI-driven changes at any time.