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

Reset theme when navigating to home

pull/4615/head
Cagatay Civici 2023-10-15 07:10:40 +03:00
parent 18904be4ad
commit 75eda031a0
7 changed files with 52 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -43,7 +43,7 @@ Styled mode is based on pre-skinned components with opinionated themes like Mate
```javascript
// theme
import 'primevue/resources/themes/lara-light-blue/theme.css';
import 'primevue/resources/themes/lara-light-teal/theme.css';
```
**Unstyled Mode**
@ -91,7 +91,7 @@ Open the nuxt configuration file and add the css dependencies.
```javascript
export default defineNuxtConfig({
css: ['primevue/resources/themes/lara-light-blue/theme.css'],
css: ['primevue/resources/themes/lara-light-teal/theme.css'],
build: {
transpile: ['primevue']
}

9
app.vue
View File

@ -12,6 +12,15 @@ export default {
themeChangeListener: null,
newsActivate: null,
newsService: null,
watch: {
$route: {
handler(to) {
if (to.name === 'index') {
this.themeChangeListener({ theme: this.$appState.darkTheme ? 'lara-dark-teal' : 'lara-light-teal', dark: this.$appState.darkTheme });
}
}
}
},
mounted() {
this.newsActivate = () => {
this.$appState.announcement = News;

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

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

2
doc/installation/NuxtIntegrationDoc.vue
View File

@ -22,7 +22,7 @@ export default {
basic: `
export default defineNuxtConfig({
css: [
"primevue/resources/themes/lara-light-blue/theme.css"
"primevue/resources/themes/lara-light-teal/theme.css"
],
build: {
transpile: ["primevue"]

4
doc/theming/SwitchThemesDoc.vue
View File

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

72
layouts/AppConfigurator.vue
View File

@ -34,6 +34,12 @@
<h3>Themes</h3>
<h4>PrimeOne Design</h4>
<div class="grid">
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-light-teal')">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Lara Teal</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-light-indigo')">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" class="w-2rem border-round" />
@ -53,8 +59,8 @@
<span class="white-space-nowrap text-sm">Lara Purple</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-light-teal')">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-2rem border-round" />
<button class="px-link h-2rem" @click="changeTheme('lara-dark-teal', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Lara Teal</span>
</div>
@ -76,40 +82,6 @@
</button>
<span class="white-space-nowrap text-sm">Lara Purple</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-dark-teal', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Lara Teal</span>
</div>
</div>
<h4>Bootstrap</h4>
<div class="grid">
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('bootstrap4-light-blue')">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Blue</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('bootstrap4-light-purple')">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Purple</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('bootstrap4-dark-blue', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Blue</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('bootstrap4-dark-purple', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Purple</span>
</div>
</div>
<h4>Material Design</h4>
@ -168,6 +140,34 @@
</div>
</div>
<h4>Bootstrap</h4>
<div class="grid">
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('bootstrap4-light-blue')">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Blue</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('bootstrap4-light-purple')">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Purple</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('bootstrap4-dark-blue', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Blue</span>
</div>
<div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('bootstrap4-dark-purple', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" class="w-2rem border-round" />
</button>
<span class="white-space-nowrap text-sm">Purple</span>
</div>
</div>
<h4>Misc</h4>
<div class="grid">
<div class="col-3 flex flex-column align-items-center gap-2">

2
nuxt.config.js
View File

@ -48,7 +48,7 @@ export default defineNuxtConfig({
{
id: 'home-table-link',
rel: 'stylesheet',
href: baseUrl + 'styles/landing/themes/lara-light-blue/theme.css'
href: baseUrl + 'styles/landing/themes/lara-light-teal/theme.css'
},
{
id: 'theme-link',