Skip to main content

Example: Instant Theme Swap

How to change the look and feel of your dashboard in real-time.

Overview​

This example demonstrates how to use the Theme Gallery to instantly switch between different brand identities without a full rebuild.

Scenario​

You want to compare how the "Candy" and "LibreApps" themes look on your current dashboard layout.

Implementation Steps​

1. Launch the Dashboard​

Start your development server:

pnpm dev

Open your browser and go to:

http://localhost:3000/en/themes/gallery

3. Apply "Candy"​

Find the "Candy" theme card and click the Apply button. Notice how the primary colors, buttons, and accents instantly change to vibrant orange and pink.

4. Apply "LibreApps"​

Now, find the "LibreApps" theme card and click Apply. The dashboard will immediately switch to a blue, social-media-inspired color scheme.

5. Compare and Choose​

Navigate through different pages (Analytics, CRM, etc.) to see how each theme affects the various components. Once you've made a decision, update your settings.md to make the change permanent for your next build.

Why this Matters​

  • Rapid Feedback: Get immediate visual feedback on design choices.
  • Stakeholder Reviews: Show different branding options to clients or team members in real-time.
  • User Preference: This same mechanism can be used to allow end-users to customize their own dashboard experience.

Best Practices​

  • ✅ Do this: Use the Theme Gallery as a "sandbox" for exploring new color schemes.
  • ✅ Do this: Check both light and dark modes for each theme you preview.
  • ❌ Don't do this: Assume that an "Applied" theme in the gallery is permanent; you must update settings.md to lock it in for production.