Des thèmes bien faits.
Enfin.
J’en ai vu assez, des apps Vue noyées dans des spaghettis CSS, pour toute une vie. Vous connaissez le topo : on colle une classe .dark sur html, on prie pour que les overrides ne se chamaillent pas, et tout s’effondre quand le client réclame du “orange automnal” ou du “vert teal de marque”. vue-multiple-themes v4 — c’est le mot-clé, les amis — vous sort de ce trou avec des propriétés CSS personnalisées, des composables réactifs, et des presets qui marchent vraiment sur Vue 2 et 3.
J’ai bossé sur des UI Vue pendant des années, et un pattern revient sans cesse : il faut plus que sombre/clair. Les clients veulent des thèmes saisonniers, des palettes spécifiques à la marque, et des contrastes conformes à l’accessibilité.
Le créateur tape dans le mille. Les bascules standard ? Ça passe pour les duos clair/sombre. Mais passez à sept — clair, sombre, sépia, océan, forêt, coucher de soleil, hiver — et vous voilà en enfer des sélecteurs : règles dupliquées, guerres de spécificité, impossibilité de checker WCAG facilement. Cette lib renverse la table.
Elle injecte des vars –vmt-* directement sur l’élément cible. Changement de thème ? Les valeurs se mettent à jour en une seule couche de cascade. Pas de re-rendu. Le composable réactif useTheme() s’utilise partout. Le plugin Tailwind transforme ces vars en utilitaires comme bg-vmt-surface. Et les utils couleur — contrastRatio, autoContrast — tout en fonctions pures, safe SSR, tree-shakeables.
Installation punchy. pnpm add vue-multiple-themes. Branchez dans main.ts :
app.use(VueMultipleThemesPlugin, { defaultTheme: ‘dark’, strategy: ‘attribute’, persist: true, });
Et voilà ?
const { currentTheme, setTheme, themes } = useTheme({ themes: PRESET_THEMES });Boum. Boutons pour switcher. Vars sur html. Stylez votre .card avec var(–vmt-background). Mises à jour instantanées partout.
Pourquoi virer votre bidouille de thème rouillée ?
Écoutez, si vous roulez encore vos vars CSS à la main ou — Dieu nous en garde — des toggles de classes JS, réveillez-vous. vue-multiple-themes, c’est pas du buzz : c’est extrait d’une vraie galère. Sept presets ? Clair en indigo propre. Sombre en violet punchy. Sépia en parchemin chaud (les fans de livres, réjouissez-vous). Bleus océan, verts forêt, feux de coucher de soleil, glaces hivernales — tout calibré, quasi accessible d’origine.
Le clou ? Générez les vôtres. const { light, dark } = generateThemePair(‘#6366f1’); Ou scale = generateColorScale(‘#6366f1’, 9); Or en barre pour le SaaS. Le tenant choisit son hex de marque ? Toute l’UI s’adapte. Fini les tickets “rends-le violet” en backlog.
Utilisateurs Tailwind : createVmtPlugin() balance bg-vmt-foreground, border-vmt-border. Switch de thème ? Les divs se repeignent en douceur. Et persistance en localStorage par défaut. Oublié les préfs utilisateur ? C’est géré.
Ma petite perle perso : ça rappelle l’ascension de Tailwind — quand les classes utilitaires ont tué les cauchemars BEM. vue-multiple-themes pourrait standardiser le theming Vue comme Tailwind l’a fait pour CSS. Prono : dans un an, tous les sites Nuxt/VitePress zappent les hacks custom. Le core Vue pourrait même piquer le composable.
Blabla corporate ? Zéro ici. Open source, zéro deps hors Vue. Vue 2.7+ ou 3. Typé. Mais attention : si les presets vous enferment, fork. Pas de flemme.
vue-multiple-themes est-il vraiment accessible ?
Réponse courte : mieux que la moyenne des bidouilles en mode sombre.
Plus longuement ? Utils WCAG intégrés. contrastRatio(‘#6366f1’, ‘#ffffff’) crache 4.54. checkContrast() valide AA/AAA. autoContrast choisit blanc ou noir intelligemment. Génération de palettes ? Échelles conformes.
Mais — tiret em — ce n’est pas magique. Vous stylez toujours contre les vars. Contraste de bordure loupé ? Votre faute. Les presets restent safe, quand même. Hiver en blancs glacés : AAA pour g
