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 ```javascript
// theme // theme
import 'primevue/resources/themes/lara-light-blue/theme.css'; import 'primevue/resources/themes/lara-light-teal/theme.css';
``` ```
**Unstyled Mode** **Unstyled Mode**
@ -91,7 +91,7 @@ Open the nuxt configuration file and add the css dependencies.
```javascript ```javascript
export default defineNuxtConfig({ export default defineNuxtConfig({
css: ['primevue/resources/themes/lara-light-blue/theme.css'], css: ['primevue/resources/themes/lara-light-teal/theme.css'],
build: { build: {
transpile: ['primevue'] transpile: ['primevue']
} }

9
app.vue
View File

@ -12,6 +12,15 @@ export default {
themeChangeListener: null, themeChangeListener: null,
newsActivate: null, newsActivate: null,
newsService: 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() { mounted() {
this.newsActivate = () => { this.newsActivate = () => {
this.$appState.announcement = News; this.$appState.announcement = News;

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

@ -77,7 +77,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-blue/theme.css";`; import "primevue/resources/themes/lara-light-teal/theme.css";`;
// package.json // package.json
dependencies['primeflex'] = app_dependencies['primeflex'] || 'latest'; dependencies['primeflex'] = app_dependencies['primeflex'] || 'latest';

2
doc/installation/NuxtIntegrationDoc.vue
View File

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

4
doc/theming/SwitchThemesDoc.vue
View File

@ -46,7 +46,7 @@ PrimeVue.changeTheme('md-dark-indigo', 'md-light-indigo', 'theme-link', () => {}
` `
}, },
code4: { 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: { code5: {
basic: ` basic: `
@ -60,7 +60,7 @@ export default defineNuxtConfig({
{ {
id: 'theme-link', id: 'theme-link',
rel: 'stylesheet', 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> <h3>Themes</h3>
<h4>PrimeOne Design</h4> <h4>PrimeOne Design</h4>
<div class="grid"> <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"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-light-indigo')"> <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" /> <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> <span class="white-space-nowrap text-sm">Lara Purple</span>
</div> </div>
<div class="col-3 flex flex-column align-items-center gap-2"> <div class="col-3 flex flex-column align-items-center gap-2">
<button class="px-link h-2rem" @click="changeTheme('lara-light-teal')"> <button class="px-link h-2rem" @click="changeTheme('lara-dark-teal', true)">
<img src="https://primefaces.org/cdn/primevue/images/themes/lara-light-teal.png" alt="Lara Light Teal" class="w-2rem border-round" /> <img src="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" class="w-2rem border-round" />
</button> </button>
<span class="white-space-nowrap text-sm">Lara Teal</span> <span class="white-space-nowrap text-sm">Lara Teal</span>
</div> </div>
@ -76,40 +82,6 @@
</button> </button>
<span class="white-space-nowrap text-sm">Lara Purple</span> <span class="white-space-nowrap text-sm">Lara Purple</span>
</div> </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> </div>
<h4>Material Design</h4> <h4>Material Design</h4>
@ -168,6 +140,34 @@
</div> </div>
</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> <h4>Misc</h4>
<div class="grid"> <div class="grid">
<div class="col-3 flex flex-column align-items-center gap-2"> <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', id: 'home-table-link',
rel: 'stylesheet', 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', id: 'theme-link',