Improve Theming Support — Make Custom Colors and Theme Overrides Easier

[MotionPhix]

Problem Description

Currently, theming shadcn-vue components is not as straightforward as it could be. When trying to apply custom colors or create a personalized theme, developers face challenges because the theming system feels tightly coupled to the default Tailwind configuration and the base tokens.

For example:

• Changing the primary color across all components requires manual editing of multiple variables.

• There’s no simple or documented way to “spin up” a new theme variant (e.g., brand, dark-alt, seasonal).

• Token overrides (like --primary, --secondary, etc.) don’t cascade cleanly across all components without digging into source CSS.

This makes it difficult to quickly adapt shadcn-vue to different brand palettes or client-specific color systems.

Suggested Improvement

It would be great if shadcn-vue introduced a more flexible and intuitive theming layer. Some possible improvements:

1. Centralized Theme Configuration

• Introduce a theme.config.ts or similar file where users can define color tokens and semantic names (e.g. brand, accent, neutral).
• Components automatically reference these tokens.

Theme Generator CLI

• A small CLI or script (npx shadcn-vue theme init) to scaffold a custom theme with base variables.

• Optionally allow generating light/dark variants.

Dynamic Theme Support

Expose CSS variables in a predictable way so developers can easily swap themes at runtime (for multi-brand apps).

• Documentation

Clear guide showing how to replace the default theme with a custom one without breaking component styles.