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

Theme toggle bug fixed for landing page

pull/3449/head
Bahadır Sofuoğlu 2022-12-27 15:17:26 +03:00
parent 7538462bd2
commit 63d1a6bd9c
2 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
pages/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :class="landingClass"> <div :class="landingClass">
<Intro></Intro> <Intro @change:theme="onThemeToggle"></Intro>
<ComponentSection /> <ComponentSection />
<ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" /> <ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
<BlockSection /> <BlockSection />
@ -13,6 +13,7 @@
</template> </template>
<script> <script>
import EventBus from '@/layouts/AppEventBus';
import BlockSection from './landing/BlockSection'; import BlockSection from './landing/BlockSection';
import ComponentSection from './landing/ComponentSection'; import ComponentSection from './landing/ComponentSection';
import DesignerSection from './landing/DesignerSection'; import DesignerSection from './landing/DesignerSection';
@ -50,6 +51,13 @@ export default {
this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-blue' : 'lara-light-blue'); this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-blue' : 'lara-light-blue');
}, },
methods: { methods: {
onThemeToggle() {
const newTheme = this.$appState.darkTheme ? 'lara-light-blue' : 'lara-dark-blue';
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 });
this.replaceTableTheme(newTableTheme);
},
onTableThemeChange(value) { onTableThemeChange(value) {
this.replaceTableTheme(value); this.replaceTableTheme(value);
}, },

13
pages/landing/Intro.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="landing-intro"> <div class="landing-intro">
<AppNews v-if="$appState.newsActive" /> <AppNews v-if="$appState.newsActive" />
<HeaderSection @theme-toggle="onThemeToggle" /> <HeaderSection @theme-toggle="$emit('change:theme')" />
<HeroSection /> <HeroSection />
</div> </div>
</template> </template>
@ -10,16 +10,9 @@
import AppNews from '@/layouts/AppNews'; import AppNews from '@/layouts/AppNews';
import HeaderSection from './HeaderSection'; import HeaderSection from './HeaderSection';
import HeroSection from './HeroSection'; import HeroSection from './HeroSection';
export default {
methods: {
onThemeToggle() {
const newTheme = this.$appState.darkTheme ? 'lara-light-blue' : 'lara-dark-blue';
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 }); export default {
this.replaceTableTheme(newTableTheme); emits: ['change:theme'],
}
},
components: { components: {
HeaderSection, HeaderSection,
HeroSection, HeroSection,