Themes done right.
Finally.
I’ve stared at enough Vue apps drowning in CSS spaghetti to last a lifetime. You know the drill: slap a .dark class on html, pray your overrides don’t clash, and watch it crumble when the client wants ‘autumn orange’ or ‘tenant-brand teal.’ vue-multiple-themes v4 — that’s the keyword here, folks — yanks you out of that pit with CSS custom properties, reactive composables, and presets that actually work across Vue 2 and 3.
I have been building UIs with Vue for years and one pattern comes up constantly, you need more than dark/light. Clients want seasonal themes, brand-specific palettes, and accessibility-compliant contrasts.
The creator nails it. Standard toggles? Fine for light/dark duos. But scale to seven — light, dark, sepia, ocean, forest, sunset, winter — and you’re in selector hell: duplicated rules, specificity wars, no easy WCAG checks. This lib flips the script.
It injects –vmt-* vars right at your target element. Swap themes? Values update in one cascade layer. No re-renders. Reactive useTheme() composable bubbles anywhere. Tailwind plugin turns those vars into utilities like bg-vmt-surface. And color utils — contrastRatio, autoContrast — all pure functions, SSR-safe, tree-shakeable.
Punchy setup. pnpm add vue-multiple-themes. Plug it in main.ts:
app.use(VueMultipleThemesPlugin, { defaultTheme: ‘dark’, strategy: ‘attribute’, persist: true, });
Then?
const { currentTheme, setTheme, themes } = useTheme({ themes: PRESET_THEMES });Boom. Buttons to flip. Vars on html. Style your .card with var(–vmt-background). Instant updates everywhere.
Why Ditch Your Crusty Theme Hack?
Look, if you’re still hand-rolling CSS vars or — god forbid — JS class toggles, wake up. vue-multiple-themes isn’t hype; it’s extraction from real pain. Seven presets? Light’s clean indigo. Dark’s violet punch. Sepia’s warm parchment (book nerds, rejoice). Ocean blues, forest greens, sunset fires, winter ice — all tuned, accessible-ish out the box.
But the killer? Generate your own. const { light, dark } = generateThemePair(‘#6366f1’); Or scale = generateColorScale(‘#6366f1’, 9); SaaS gold. Tenant picks brand hex? Full UI adapts. No more ‘make it purple’ ticket backlog.
Tailwind users: createVmtPlugin() drops bg-vmt-foreground, border-vmt-border. Themes switch? Divs repaint smoothly. And persist to localStorage by default. Forgot to code user prefs? It’s handled.
Here’s my unique dig: this echoes the Tailwind rise — back when utility classes killed BEM nightmares. vue-multiple-themes could standardize Vue theming like Tailwind did CSS. Predict: in a year, every Nuxt/VitePress site skips custom hacks. Vue core might even borrow the composable.
Corporate spin? None here. Open source, zero deps beyond Vue. Vue 2.7+ or 3. Typed. But watch: if presets lock you in, fork ‘em. Don’t be lazy.
Is vue-multiple-themes Actually Accessible?
Short answer: better than your average dark mode mashup.
Longer? WCAG utils baked in. contrastRatio(‘#6366f1’, ‘#ffffff’) spits 4.54. checkContrast() flags AA/AAA passes. autoContrast picks white or black smartly. Generate palettes? Mixes compliant scales.
But — em-dash aside — it’s not magic. You still style against vars. Miss a border contrast? Your fault. Presets lean safe, though. Winter’s icy whites pass large-text AAA. Forest greens? AA solid. Test your brand jobs, devs.
SSR-safe means no hydration mismatches. Nuxt lovers, smile. Custom elements? Strategy: ‘attribute’, ‘class’, or ‘both’. Flex.
One gripe: docs scream ‘plug and play,’ but themes array defaults to presets. Override? Easy, but hunt the types. Vue 2 folks — yes, it works, but upgrade if you can.
Why Does Multi-Theming Matter for Indie Devs?
You’re solo, shipping MVPs. Clients ping: ‘Make it match our rebrand.’ Old way: hours tweaking :root, testing mobile, begging Figma for hexes. Now? Feed generateThemePair their color. Done.
Seasonal? Swap to sunset for summer promo. Accessibility audit? Run checkContrast on your palette. No vendor lock — it’s your CSS vars.
Dry humor time: remember when dark mode broke half the web? Icons invisible, text mush. This lib’s utils could’ve saved us. Late, but welcome.
Scale to enterprise? Tenants galore. Per-user themes? Hook into your auth. It’s composable, remember?
Competition? VueUse has useDark, but single-bit. PrimeVue, Vuetify bundle themes — fat, opinionated. This? Lean, standalone. Pairs with anything.
The Fine Print (Because Nothing’s Free)
Persist true? localStorage ‘vmt-theme’. Privacy hawk? Flip false. StorageKey custom.
Returns from useTheme: currentTheme, setTheme, next/prevTheme. Cycle buttons? Trivial.
Table of options? Themes array, defaultTheme ‘light’, strategy ‘attribute’, persist true. Obvious.
Edge: Vue 2 needs 2.7+. Legacy? Sigh, migrate.
My bold prediction — unique insight alert: as Vue 3 dominates, this hits 10k stars. Tailwind plugin alone justifies it. If Evan You tweets, moon.
But call out the PR: ‘instantly, no re-renders’ — true for CSS, but composable reacts. Minor watcher firings, negligible.
Worth it? If themes haunt you, yes. Otherwise, bookmark.
🧬 Related Insights
- Read more: docs.rs to Gut Default Targets: Rust Docs Get Skinnier in 2026
- Read more: GitLab’s AI Prompts Promise Faster Shipping — But Who’s Really Winning?
Frequently Asked Questions
What is vue-multiple-themes and how do I install it?
It’s a Vue lib for dynamic multi-themes using CSS vars. pnpm add vue-multiple-themes, then app.use(VueMultipleThemesPlugin, options).
Does vue-multiple-themes work with Tailwind CSS?
Yes, via createVmtPlugin(). Utilities like text-vmt-foreground auto-update on theme switch.
Can vue-multiple-themes generate custom themes?
Absolutely — generateThemePair(color) or generateColorScale(color, steps) for brand/accessible palettes.
