Error page dark mode change fixes

pull/5806/head
tugcekucukoglu 2024-05-24 10:25:00 +03:00
parent 0242c7987c
commit e96f2070e1
2 changed files with 26 additions and 36 deletions

36
app.vue
View File

@ -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>

View File

@ -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;