CSS variable mismatch with PrimeVue 4.x
garethjamesmoneyalive opened this issue · comments
CSS color variable names have changed in PrimeVue 4.x so there's currently a mismatch.
The class text-red-500
currently uses:
.text-red-500 {
color: var(--red-500) !important;
}
This is fine with PrimeVue 3.x but as of 4.x the CSS variable is prefixed and needs the value --p-red-500
.
This should be pinned. We just moved everything to primeflex 😞 and now its just not going to work with primevue v4.
This should be pinned. We just moved everything to primeflex 😞 and now its just not going to work with primevue v4.
Try to remove prefix in app init
app.use(PrimeVue, {
theme: {
preset: Lara,
options: {
prefix: "",
},
},
});
If you are using Nuxt, the solution proposed by asokr also works, you just add the prefix to the export of the theme
export default { preset: MyPreset, options: { darkModeSelector: ".p-dark", prefix: "", }, };
This is a temporary solution, it would be best to migrate to what will be supported. All the best.