parent
563e5a7e3c
commit
afdbfc9aaf
36
app.vue
36
app.vue
|
@ -3,3 +3,39 @@
|
|||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EventBus from '@/layouts/AppEventBus';
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
EventBus.on('dark-mode-toggle', this.darkModeToggleListener);
|
||||
},
|
||||
beforeUnmount() {
|
||||
EventBus.off('dark-mode-toggle', this.darkModeToggleListener);
|
||||
},
|
||||
methods: {
|
||||
darkModeToggleListener(event) {
|
||||
if (!document.startViewTransition) {
|
||||
this.toggleDarkMode(event);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
document.startViewTransition(() => this.toggleDarkMode(event));
|
||||
},
|
||||
toggleDarkMode(event) {
|
||||
const isDark = event.dark;
|
||||
|
||||
if (isDark) document.documentElement.classList.add('p-dark');
|
||||
else document.documentElement.classList.remove('p-dark');
|
||||
|
||||
this.$appState.darkTheme = isDark;
|
||||
|
||||
EventBus.emit('dark-mode-toggle-complete');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
|
|
|
@ -19,7 +19,6 @@
|
|||
|
||||
<script>
|
||||
import DomHandler from '@/components/lib/utils/DomHandler';
|
||||
import EventBus from '@/layouts/AppEventBus';
|
||||
import AppFooter from './AppFooter.vue';
|
||||
import AppMenu from './AppMenu.vue';
|
||||
import AppNews from './AppNews.vue';
|
||||
|
@ -45,32 +44,7 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
EventBus.on('dark-mode-toggle', this.darkModeToggleListener);
|
||||
},
|
||||
beforeUnmount() {
|
||||
EventBus.off('dark-mode-toggle', this.darkModeToggleListener);
|
||||
},
|
||||
methods: {
|
||||
darkModeToggleListener(event) {
|
||||
if (!document.startViewTransition) {
|
||||
this.toggleDarkMode(event);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
document.startViewTransition(() => this.toggleDarkMode(event));
|
||||
},
|
||||
toggleDarkMode(event) {
|
||||
const isDark = event.dark;
|
||||
|
||||
if (isDark) document.documentElement.classList.add('p-dark');
|
||||
else document.documentElement.classList.remove('p-dark');
|
||||
|
||||
this.$appState.darkTheme = isDark;
|
||||
|
||||
EventBus.emit('dark-mode-toggle-complete');
|
||||
},
|
||||
onMenuButtonClick() {
|
||||
if (this.sidebarActive) {
|
||||
this.sidebarActive = false;
|
||||
|
|
Loading…
Reference in New Issue