Comment créer un système CSS dynamique dans une application Vue 3 ?
Je travaille sur une application qui sera utilisée par de nombreux clients différents, mais les « thèmes » ne peuvent pas être partagés entre les clients car leurs schémas de couleurs sont considérés comme propriétaires et confidentiels, même si je sais que cela semble ridicule.
Maintenant, la couleur est principale App.vue 组件中定义的，没有 <style> 而不是 <stylescoped>, puis les composants en aval sont définis.
La façon dont cela fonctionne actuellement est que j'utilise des variables CSS pour définir les couleurs et les dégradés.
Je cherche plus ou moins une solution qui fasse quelque chose comme du pseudocode :
const clientName = import.meta.env.CLIENT_NAME
if (clientName === 'abc') {
:root {
--background-color: #f3f3f3;
--default-font-color: #000000;
--primary: #8c4799;
--secondary: #d22630;
--gradient-primary: rgba(140, 71, 153, 0.2) 4.55%;
--gradient-secondary: rgba(210, 38, 48, 0.02) 105.67%;
--failure-color: #b94527;
--badge1: #419bbe;
--badge1text: #ffffff;
--c-white: #f2f2f2;
}
} else if (clientName === 'def') {
--background-color: #0c0c0c;
--default-font-color: #ffffff;
--primary: #c1fc3d;
--secondary: #d22630;
--gradient-primary: rgba(110, 71, 153, 0.2) 3%;
--gradient-secondary: rgba(190, 38, 48, 0.02) 50%;
--failure-color: #b94527;
--badge1: #419bbe;
--badge1text: #ffffff;
--c-white: #ffffff;
}
N'oubliez pas que tous les composants en aval utilisent ces variables et qu'il s'agit d'une très grande application.
J'utilise Vite pour le regroupement (si cela fonctionne).
