# Customizing the Dashboard Theme

DashCaddy includes a powerful theme builder that lets you customize colors, accents, and visual elements. This tutorial shows how to access and use the theme builder.

**Prerequisites:** Logged into DashCaddy dashboard.

---

## Step 1: Open the Theme Builder

Locate the theme button in the top bar of the dashboard. It's represented by a 🎨 icon with the text "Light" (showing your current theme).

**What you should see:**
- Top bar with: Weather widget, Clock, Settings gear, Theme toggle (🎨 Light), License badge

Click the **🎨 Light** button (or click **Customize** text if visible) to open the Theme Builder modal.

Screenshot: `screenshots/03-theme-customization/light/01-light-theme-dashboard.png`

---

## Step 2: Explore the Theme Builder

The Theme Builder modal opens with several sections:

**Header:**
- Theme Builder title
- Edit dropdown (currently editing "New Theme")
- Delete button
- Name field for your theme

**Start From Presets:**
A list of built-in theme presets you can start from:
- **Dark** — Dark background with light text
- **Light** — Light background
- **Blue** — Blue-tinted theme
- **Black** — Pure black background
- **Nord** — Nord color palette
- **Dracula** — Dracula color scheme
- **Solarized Dark** / **Solarized Light** — Solarized themes
- **Taxi** — Yellow-tinted theme
- **Ocean** — Ocean blue theme

**Preview Area:**
A sample card showing how your theme looks, including:
- Secondary text preview
- Accent Button preview
- Status indicators (Online/Offline)

Screenshot: `screenshots/03-theme-customization/light/04-theme-builder-open.png`

---

## Step 3: Select a Base Theme

Click on one of the preset themes (e.g., "Dark") to start from that base. The preview will update to show how the selected preset looks.

**What you should see:**
The preview card updates to reflect the selected preset's colors. The "Start from" selection highlights your choice.

Screenshot: `screenshots/03-theme-customization/dark/05-dark-preset-selected.png`

---

## Step 4: Customize Colors (Optional)

Below the presets, you'll find granular color controls organized into sections:

**Base Colors:**
- Background — Main background color
- Card — Card/panel background color
- Text — Primary text color
- Muted Text — Secondary/hint text color
- Border — Border and divider color

**Accent Colors:**
- Accent — Primary accent color (buttons, links, highlights)
- Accent Strong — Deeper accent for emphasis

**Status Colors:**
- OK Background — Background for success/OK indicators
- OK Text — Text color for success states
- Error Bg — Background for error indicators
- Error Text — Text color for error states

Each color field is editable — click on a color swatch or enter a hex value to customize.

---

## Step 5: Save Your Theme

When you're satisfied with your customizations:

1. Click **Save Theme** at the bottom of the modal
2. The theme will be applied to your dashboard immediately
3. Click **Cancel** to discard changes, or **✕** to close the modal

Screenshot: `screenshots/03-theme-customization/dark/02-dark-theme-dashboard.png`

---

## Importing and Exporting Themes

The Theme Builder supports theme import/export for backup or sharing:

- **Import** — Load a previously exported theme file (.json)
- **Export** — Download your current theme as a file for backup or sharing

---

## Common Issues

| Issue | Solution |
|-------|----------|
| Theme builder button not visible | Scroll to top of dashboard — the button is in the top bar |
| Colors not updating in preview | Click directly on a color swatch to edit it |
| Theme not saving | Ensure you click "Save Theme" before closing the modal |
| Preset click not working | Try clicking directly on the preset name text |