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

Showcase theme rename

pull/4847/head
tugcekucukoglu 2023-11-20 11:33:43 +03:00
parent 71b25f8516
commit f03b37c9a5
12 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.vue
View File

@ -15,7 +15,7 @@ export default {
$route: { $route: {
handler(to) { handler(to) {
if (to.name === 'index') { if (to.name === 'index') {
this.themeChangeListener({ theme: this.$appState.darkTheme ? 'lara-dark-teal' : 'lara-light-teal', dark: this.$appState.darkTheme }); this.themeChangeListener({ theme: this.$appState.darkTheme ? 'lara-dark-green' : 'lara-light-green', dark: this.$appState.darkTheme });
} }
} }
} }

2
components/doc/codeeditor/templates.js
View File

@ -79,7 +79,7 @@ import ThemeSwitcher from './components/ThemeSwitcher.vue';`;
} else { } else {
// main.js // main.js
pvTheme += `import "primeflex/primeflex.css"; pvTheme += `import "primeflex/primeflex.css";
import "primevue/resources/themes/lara-light-teal/theme.css";`; import "primevue/resources/themes/lara-light-green/theme.css";`;
// package.json // package.json
dependencies['primeflex'] = app_dependencies['primeflex'] || 'latest'; dependencies['primeflex'] = app_dependencies['primeflex'] || 'latest';

2
doc/installation/StyledModeDoc.vue
View File

@ -13,7 +13,7 @@ export default {
data() { data() {
return { return {
code: { code: {
basic: "\nimport 'primevue/resources/themes/lara-light-teal/theme.css'\n" basic: "\nimport 'primevue/resources/themes/lara-light-green/theme.css'\n"
} }
}; };
} }

2
doc/nuxt/StyleDoc.vue
View File

@ -19,7 +19,7 @@ export default {
code1: { code1: {
basic: ` basic: `
export default defineNuxtConfig({ export default defineNuxtConfig({
css: ['primevue/resources/themes/lara-dark-teal/theme.css'] css: ['primevue/resources/themes/lara-dark-green/theme.css']
}) })
` `
} }

8
doc/theming/BuiltInThemesDoc.vue
View File

@ -31,10 +31,18 @@ primevue/resources/themes/lara-light-blue/theme.css
primevue/resources/themes/lara-light-indigo/theme.css primevue/resources/themes/lara-light-indigo/theme.css
primevue/resources/themes/lara-light-purple/theme.css primevue/resources/themes/lara-light-purple/theme.css
primevue/resources/themes/lara-light-teal/theme.css primevue/resources/themes/lara-light-teal/theme.css
primevue/resources/themes/lara-light-green/theme.css
primevue/resources/themes/lara-light-amber/theme.css
primevue/resources/themes/lara-light-cyan/theme.css
primevue/resources/themes/lara-light-pink/theme.css
primevue/resources/themes/lara-dark-blue/theme.css primevue/resources/themes/lara-dark-blue/theme.css
primevue/resources/themes/lara-dark-indigo/theme.css primevue/resources/themes/lara-dark-indigo/theme.css
primevue/resources/themes/lara-dark-purple/theme.css primevue/resources/themes/lara-dark-purple/theme.css
primevue/resources/themes/lara-dark-teal/theme.css primevue/resources/themes/lara-dark-teal/theme.css
primevue/resources/themes/lara-dark-green/theme.css
primevue/resources/themes/lara-dark-amber/theme.css
primevue/resources/themes/lara-dark-cyan/theme.css
primevue/resources/themes/lara-dark-pink/theme.css
primevue/resources/themes/soho-light/theme.css primevue/resources/themes/soho-light/theme.css
primevue/resources/themes/soho-dark/theme.css primevue/resources/themes/soho-dark/theme.css
primevue/resources/themes/viva-light/theme.css primevue/resources/themes/viva-light/theme.css

4
doc/theming/SwitchThemesDoc.vue
View File

@ -47,7 +47,7 @@ PrimeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {}
}, },
code4: { code4: {
basic: ` basic: `
<link id="theme-link" rel="stylesheet" href="/themes/lara-light-teal/theme.css"> <link id="theme-link" rel="stylesheet" href="/themes/lara-light-green/theme.css">
` `
}, },
code5: { code5: {
@ -59,7 +59,7 @@ export default defineNuxtConfig({
{ {
id: 'theme-link', id: 'theme-link',
rel: 'stylesheet', rel: 'stylesheet',
href: baseUrl + 'themes/lara-light-teal/theme.css' href: baseUrl + 'themes/lara-light-green/theme.css'
} }
] ]
} }

48
layouts/AppConfigurator.vue
View File

@ -36,13 +36,23 @@
<button <button
:class="[ :class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', 'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'teal'), 'hover:border-500 surface-border': !isThemeActive('lara', 'teal') } { 'border-primary': isThemeActive('lara', 'green'), 'hover:border-500 surface-border': !isThemeActive('lara', 'green') }
]" ]"
style="border-radius: 30px" style="border-radius: 30px"
@click="changeTheme('lara', 'teal')" @click="changeTheme('lara', 'green')"
> >
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span> <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
</button> </button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('lara', 'cyan') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'cyan')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
</button>
<button <button
:class="[ :class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', 'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
@ -63,6 +73,8 @@
> >
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span> <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
</button> </button>
</div>
<div class="flex align-items-center justify-content-between gap-3">
<button <button
:class="[ :class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', 'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
@ -73,8 +85,6 @@
> >
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span> <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
</button> </button>
</div>
<div class="flex align-items-center justify-content-between gap-3">
<button <button
:class="[ :class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', 'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
@ -85,6 +95,16 @@
> >
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span> <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
</button> </button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'teal'), 'hover:border-500 surface-border': !isThemeActive('lara', 'teal') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'teal')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
</button>
<button <button
:class="[ :class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', 'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
@ -95,26 +115,6 @@
> >
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span> <span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
</button> </button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('lara', 'cyan') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'cyan')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
</button>
<button
:class="[
'bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200',
{ 'border-primary': isThemeActive('lara', 'turquoise'), 'hover:border-500 surface-border': !isThemeActive('lara', 'turquoise') }
]"
style="border-radius: 30px"
@click="changeTheme('lara', 'turquoise')"
>
<span class="block h-1rem w-full" style="border-radius: 30px; background: linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
</button>
</div> </div>
</section> </section>
<section class="py-4 border-bottom-1 surface-border"> <section class="py-4 border-bottom-1 surface-border">

2
layouts/default.vue
View File

@ -94,7 +94,7 @@ export default {
newTheme = currentTheme.replace('dark', 'light'); newTheme = currentTheme.replace('dark', 'light');
} else { } else {
if (currentTheme.includes('light') && currentTheme !== 'fluent-light') newTheme = currentTheme.replace('light', 'dark'); if (currentTheme.includes('light') && currentTheme !== 'fluent-light') newTheme = currentTheme.replace('light', 'dark');
else newTheme = 'lara-dark-teal'; //fallback else newTheme = 'lara-dark-green'; //fallback
} }
EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme }); EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });

4
nuxt.config.js
View File

@ -52,12 +52,12 @@ export default defineNuxtConfig({
{ {
id: 'home-table-link', id: 'home-table-link',
rel: 'stylesheet', rel: 'stylesheet',
href: baseUrl + 'styles/landing/themes/lara-light-teal/theme.css' href: baseUrl + 'styles/landing/themes/lara-light-green/theme.css'
}, },
{ {
id: 'theme-link', id: 'theme-link',
rel: 'stylesheet', rel: 'stylesheet',
href: baseUrl + 'themes/lara-light-teal/theme.css' href: baseUrl + 'themes/lara-light-green/theme.css'
}, },
{ rel: 'icon', href: baseUrl + 'favicon.ico' } { rel: 'icon', href: baseUrl + 'favicon.ico' }
], ],

6
pages/index.vue
View File

@ -38,7 +38,7 @@ export default {
}, },
data() { data() {
return { return {
tableTheme: 'lara-light-teal' tableTheme: 'lara-light-green'
}; };
}, },
themeChangeListener: null, themeChangeListener: null,
@ -53,11 +53,11 @@ export default {
document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org'; document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
} }
this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-teal' : 'lara-light-teal'); this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-green' : 'lara-light-green');
}, },
methods: { methods: {
onDarkModeToggle() { onDarkModeToggle() {
const newTheme = this.$appState.darkTheme ? 'lara-light-teal' : 'lara-dark-teal'; const newTheme = this.$appState.darkTheme ? 'lara-light-green' : 'lara-dark-green';
const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark'); const newTableTheme = this.$appState.darkTheme ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme }); EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });

2
pages/landing/ThemeSection.vue
View File

@ -3,7 +3,7 @@
<div class="section-header">Themes</div> <div class="section-header">Themes</div>
<p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as Material, Bootstrap, Tailwind, PrimeOne or develop your own.</p> <p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as Material, Bootstrap, Tailwind, PrimeOne or develop your own.</p>
<div class="flex flex-wrap justify-content-center px-5"> <div class="flex flex-wrap justify-content-center px-5">
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'teal')">PrimeOne</button> <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'green')">PrimeOne</button>
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button> <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button> <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
<a type="button" class="font-medium px-link linkbox mt-4" href="https://designer.primevue.org">more...</a> <a type="button" class="font-medium px-link linkbox mt-4" href="https://designer.primevue.org">more...</a>

2
plugins/app-state.js
View File

@ -1,6 +1,6 @@
const $appState = { const $appState = {
install: (Vue, options) => { install: (Vue, options) => {
Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-teal', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: false, announcement: null, storageKey: 'primevue' }); Vue.config.globalProperties.$appState = reactive({ theme: 'lara-light-green', darkTheme: false, codeSandbox: false, sourceType: 'options-api', newsActive: false, announcement: null, storageKey: 'primevue' });
} }
}; };