vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update theming doc

pull/3743/head
Cagatay Civici 2023-03-13 18:29:42 +03:00
parent 5a70ce23cd
commit ada556bbd9
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
doc/theming/CustomThemeDoc.vue
View File

@ -22,13 +22,13 @@
<h3>Theme SCSS</h3> <h3>Theme SCSS</h3>
<p> <p>
The theme scss is availabe as open source at <a href="http://github.com/primefaces/primevue-sass-theme">primevue-sass-theme</a> repository. The <i>base</i> folder contains the theming structure of the components, themes under The theme scss is availabe as open source at <a href="http://github.com/primefaces/primevue-sass-theme">primevue-sass-theme</a> repository. The <i>theme-base</i> folder contains the theming structure of the components, themes under
<i>themes</i> folder define the SCSS variables and import the <i>base</i> to define a theme. The <i>themes</i> folder contains all the built-in themes so you can customize their code as well. <i>themes</i> folder import the base and define the SCSS variables. The <i>themes</i> folder also contains all the built-in themes so you can customize their code as well.
</p> </p>
<p> <p>
To create your own theme, clone the <a href="http://github.com/primefaces/primevue-sass-theme">primevue-sass-theme</a> repository and access the <i>themes/mytheme</i> folder. The sass variables to customize are available under the To create your own theme, <a href="https://github.com/primefaces/primevue-sass-theme/releases">download</a> the release matching your PrimeVue version and access the <i>themes/mytheme</i> folder. The sass variables to customize are available under the
<i>variables</i> folder. The <i>_fonts</i> file can be used to define a custom font for your project whereas the optional <i>_extensions</i> file is provided to add overrides to the components designs. The <i>theme.scss</i> file imports <i>variables</i> folder. The <i>_fonts</i> file can be used to define a custom font for your project whereas the optional <i>_extensions</i> file is provided to add overrides to the components designs. The <i>theme.scss</i> file imports
the theme files along with the <i>base</i> 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. the theme files along with the <i>theme-base</i> 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.
</p> </p>
<h3>Compile SCSS Manually</h3> <h3>Compile SCSS Manually</h3>
@ -42,8 +42,8 @@
<h3>Build Time Compilation</h3> <h3>Build Time Compilation</h3>
<p> <p>
This approach eliminates the manual compilation by delegating it to your build environment that has the ability to compile SCSS. Clone <a href="http://github.com/primefaces/primevue-sass-theme">primevue-sass-theme</a> and copy the This approach eliminates the manual compilation by delegating it to your build environment that has the ability to compile SCSS. Copy the <i>theme-base</i> folder along with <i>themes/mytheme</i> folder to your application
<i>base</i> folder along with <i>themes/mytheme</i> folder to your application where assets reside. At a suitable location like <i>main.js</i> or <i>App.vue</i>, import the <i>theme.scss</i> from <i>assets/themes/mytheme</i>. That would where assets reside. At a suitable location like <i>main.js</i> or <i>App.vue</i>, import the <i>theme.scss</i> from <i>assets/themes/mytheme</i>. 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. be it, during build time, your project will compile the sass and import the theme. Any changes to your theme will be reflected instantly.
</p> </p>
</DocSectionText> </DocSectionText>