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

Add viva theme

pull/864/head
Cagatay Civici 2021-01-13 12:24:57 +03:00
parent bf9ecec03b
commit 8da5e2ff55
7 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -34,6 +34,8 @@ yarn-error.log*
# Themes
public/themes/soho-light/
public/themes/soho-dark/
public/themes/viva-light/
public/themes/viva-dark/
public/themes/mira/
public/themes/nano/

2
gulpfile.js
View File

@ -20,7 +20,7 @@ gulp.task('build-css', function() {
gulp.task('build-themes', function() {
return gulp.src([
'public/themes/**/*','!public/themes/soho-*/**/*',
'public/themes/**/*','!public/themes/soho-*/**/*', '!public/themes/viva-*/**/*',
'!public/themes/mira/**/*', '!public/themes/nano/**/*'
])
.pipe(gulp.dest('dist/resources/themes'));

4
public/demo/images/themes/viva-dark.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="600" height="600" fill="#0E1315"/>
<path d="M299.5 456L154 145H226.75L299.5 415.5L372.25 145H445L299.5 456Z" stroke="#9EADE6" stroke-width="21"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 266 B

4
public/demo/images/themes/viva-light.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="600" height="600" fill="#5472D4"/>
<path d="M299.5 456L154 145H226.75L299.5 415.5L372.25 145H445L299.5 456Z" stroke="white" stroke-width="21"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 264 B

12
src/AppConfigurator.vue
View File

@ -210,6 +210,18 @@
</button>
<span>Soho Dark</span>
</div>
<div class="p-col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'viva-light')">
<img src="demo/images/themes/viva-light.svg" alt="Viva Light" />
</button>
<span>Viva Light</span>
</div>
<div class="p-col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)">
<img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" />
</button>
<span>Viva Dark</span>
</div>
<div class="p-col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mira')">
<img src="demo/images/themes/mira.jpg" alt="Mira" />

4
src/AppTopBar.vue
View File

@ -60,6 +60,8 @@
<li class="topbar-submenu-header">PREMIUM</li>
<li><a @click="changeTheme($event, 'soho-light')"><img src="demo/images/themes/soho-light.png" alt="Soho Light" /><span>Soho Light</span></a></li>
<li><a @click="changeTheme($event, 'soho-dark', true)"><img src="demo/images/themes/soho-dark.png" alt="Soho Dark" /><span>Soho Dark</span></a></li>
<li><a @click="changeTheme($event, 'viva-light')"><img src="demo/images/themes/viva-light.svg" alt="Viva Light" /><span>Viva Light</span></a></li>
<li><a @click="changeTheme($event, 'viva-dark', true)"><img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" /><span>Viva Dark</span></a></li>
<li><a @click="changeTheme($event, 'mira')"><img src="demo/images/themes/mira.jpg" alt="Mira" /><span>Mira</span></a></li>
<li><a @click="changeTheme($event, 'nano')"><img src="demo/images/themes/nano.jpg" alt="Nano" /><span>Nano</span></a></li>
@ -168,6 +170,8 @@ export default {
'fluent-light': 'fluent-light.png',
'soho-light': 'soho-light.png',
'soho-dark': 'soho-dark.png',
'viva-light': 'viva-light.svg',
'viva-dark': 'viva-dark.svg',
'mira': 'mira.jpg',
'nano': 'nano.jpg',
}

2
src/views/theming/Theming.vue
View File

@ -22,7 +22,7 @@
<p><a href="https://www.primefaces.org/designer/primevue">Designer</a> is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine
with 500+ variables and a Visual Designer. PrimeVue only ships the generated CSS of <b>Material</b>, <b>Bootstrap</b>, <b>Saga</b>, <b>Vela</b>, <b>Arya</b> and legacy themes whereas Designer provides
full access to the whole SASS structure and the variables of these pre-built themes for easier customization.</p>
full access to the whole SASS structure and the variables of these pre-built themes for easier customization. In addition, designer provides exclusive premium themes to subscribers including Soho, Viva, Mira and Nano that are not available in core PrimeVue distribution.</p>
<p>Whether you have your own style guide or just need a custom theme, Designer API is the right tool to design and bring them to existence.</p>