Error page dark mode change fixes
parent
0242c7987c
commit
e96f2070e1
36
app.vue
36
app.vue
|
@ -3,39 +3,3 @@
|
||||||
<NuxtPage />
|
<NuxtPage />
|
||||||
</NuxtLayout>
|
</NuxtLayout>
|
||||||
</template>
|
</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>
|
<script>
|
||||||
import DomHandler from '@/components/lib/utils/DomHandler';
|
import DomHandler from '@/components/lib/utils/DomHandler';
|
||||||
|
import EventBus from '@/layouts/AppEventBus';
|
||||||
import AppFooter from './AppFooter.vue';
|
import AppFooter from './AppFooter.vue';
|
||||||
import AppMenu from './AppMenu.vue';
|
import AppMenu from './AppMenu.vue';
|
||||||
import AppNews from './AppNews.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: {
|
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() {
|
onMenuButtonClick() {
|
||||||
if (this.sidebarActive) {
|
if (this.sidebarActive) {
|
||||||
this.sidebarActive = false;
|
this.sidebarActive = false;
|
||||||
|
|
Loading…
Reference in New Issue