Error page dark mode change fixes
parent
0242c7987c
commit
e96f2070e1
36
app.vue
36
app.vue
|
@ -3,39 +3,3 @@
|
|||
<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,6 +19,7 @@
|
|||
|
||||
<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';
|
||||
|
@ -44,7 +45,32 @@ 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