fbe1a7c95c
Tutorials covering: - Getting Started (setup wizard, timezone, deployment modes) - Theme Customization (theme builder, presets, color customization) - Viewing Logs (log viewer, live streaming, filtering) - Quick Search (keyboard shortcuts, navigation) - Backup & Restore (manual/automated backup, restore workflow) - Stats Monitoring (resource monitor, live stats, alerts) Also includes: - Self-contained HTML getting started guide - 30+ screenshots capturing UI workflows - Issues/notes documenting test instance observations Workflows documented: - Light theme screenshots - Dark theme screenshots (partial - theme builder) - App selector (noted as empty in test instance) - Theme builder modal - Logs viewer - Quick search - Backup modal - Stats monitoring Total: 6 tutorial files, 30+ screenshots, 1 HTML guide
3.7 KiB
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:
- Click Save Theme at the bottom of the modal
- The theme will be applied to your dashboard immediately
- 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 |