How to change primary color on primevue?

user_9947189 0
Viewed 3741

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 ?

primevue vue.js
1 Answers

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";`
      }
    }
  }
};
user_14139130
Related