How to change primary color on primevue?

Question

I use Primevue on a vue.js project, with the theme Deep Purple that I import this way:

import 'primevue/resources/themes/mdc-light-deeppurple/theme.css';

Now I'd just like to modify the primary color set in the theme (#673AB7) by a custom one.

How can I do this ?

Correlate

They now say they will change their approach and use custom properties instead of SASS variables in the future. SASS vars are OK, but the problem is we get compiled CSS files in "node_modules/primevue/resources/themes". So in the meanwhile, I suggest using SASS files from their GitHub. – Uncover

Answer 1

I copied the primevue theme .css file to src/assets/_theme.scss (note .scss).

Then in App.vue, instead of importing the vue theme, import _theme.scss

<style lang="scss">
@import './assets/_theme.scss'; // copied from '~primevue/resources/themes/nova/theme.css'
@import '~primevue/resources/primevue.min.css'; //core css
@import '~primeicons/primeicons.css'; //icons
...

Next, in _theme.scss, search and replace all values of the current primary-color hex code with $primary-color. This should make a bunch of replacements.

Then just set a new $primary-color variable at the top of the file.

//_theme.scss

$primary-color: #000;

If you want to define all your scss variables in a single file and make them available to every vue component without needing to @import them explicitly, then create/add the following to vue.config.js in your project root.

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/_variables.scss";`
      }
    }
  }
};

Wendywendye

One thing to beware of this approach is you're taking a static copy of the theme css then and changing it. So as PrimeVue updates, that theme will update, but you will not have the updates propagated to your app (and you'd have to redo this theme copy/change each time). I've just had a case where updating PrimveVue will break the app styling because the element structure styled by the theme has changed. – Jiggle

Answer 2

Since version 4 of PrimeVue, there is possiblity of change presets in module initialization (app.use for Vue or nuxt.config.ts for Nuxt).

To change primary color I use this config:

import Aura from '@primevue/themes/aura'

...

      theme: {
        preset: {
          ...Aura,
          semantic: {
            ...Aura.semantic,
            primary: {
              50: '{sky.50}',
              100: '{sky.100}',
              200: '{sky.200}',
...

You can also use official presets to create your own - https://primevue.org/theming/styled/#presets

Nightlong