The theme scss is availabe as open source at primevue-sass-theme repository. The theme-base folder contains the theming structure of the components, themes under - themes folder import the base and define the SCSS variables. The themes folder also contains all the built-in themes so you can customize their code as well. + themes folder import the base and define the SCSS variables. The themes folder also contains all the built-in themes so you can customize their code as well.
- To create your own theme, download the release matching your PrimeVue version and access the themes/mytheme folder. The sass variables to customize are available under the - variables folder. The _fonts file can be used to define a custom font for your project whereas the optional _extensions file is provided to add overrides to the components designs. The theme.scss file imports - the theme files along with the theme-base folder at the root to combine everything together. Next step would be compilation of the scss that can either be command line or within your project. + To create your own theme, download the release matching your PrimeVue version and access the themes/mytheme folder. The sass variables to customize are + available under the variables folder. The _fonts file can be used to define a custom font for your project whereas the optional _extensions file is provided to add overrides to the components designs. The + theme.scss file imports the theme files along with the theme-base folder at the root to combine everything together. Next step would be compilation of the scss that can either be command line or within your project.
- This approach eliminates the manual compilation by delegating it to your build environment that has the ability to compile SCSS. Copy the theme-base folder along with themes/mytheme folder to your application - where assets reside. At a suitable location like main.js or App.vue, import the theme.scss from assets/themes/mytheme. That would - be it, during build time, your project will compile the sass and import the theme. Any changes to your theme will be reflected instantly. + This approach eliminates the manual compilation by delegating it to your build environment that has the ability to compile SCSS. Copy the theme-base folder along with themes/mytheme folder to your application where assets + reside. At a suitable location like main.js or App.vue, import the theme.scss from assets/themes/mytheme. That would be it, during build time, your project will compile the sass and import the theme. Any + changes to your theme will be reflected instantly.