From 63d1a6bd9cad2f061e91c82662eddbb176f99e80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Tue, 27 Dec 2022 15:17:26 +0300
Subject: [PATCH] Theme toggle bug fixed for landing page

---
 pages/index.vue         | 10 +++++++++-
 pages/landing/Intro.vue | 13 +++----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index a978a42e1..6fdbbab6f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="landingClass">
-        <Intro></Intro>
+        <Intro @change:theme="onThemeToggle"></Intro>
         <ComponentSection />
         <ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
         <BlockSection />
@@ -13,6 +13,7 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
 import BlockSection from './landing/BlockSection';
 import ComponentSection from './landing/ComponentSection';
 import DesignerSection from './landing/DesignerSection';
@@ -50,6 +51,13 @@ export default {
         this.replaceTableTheme(this.$appState.darkTheme ? 'lara-dark-blue' : 'lara-light-blue');
     },
     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) {
             this.replaceTableTheme(value);
         },
diff --git a/pages/landing/Intro.vue b/pages/landing/Intro.vue
index 9cc3efc09..fe8717195 100644
--- a/pages/landing/Intro.vue
+++ b/pages/landing/Intro.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="landing-intro">
         <AppNews v-if="$appState.newsActive" />
-        <HeaderSection @theme-toggle="onThemeToggle" />
+        <HeaderSection @theme-toggle="$emit('change:theme')" />
         <HeroSection />
     </div>
 </template>
@@ -10,16 +10,9 @@
 import AppNews from '@/layouts/AppNews';
 import HeaderSection from './HeaderSection';
 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 });
-            this.replaceTableTheme(newTableTheme);
-        }
-    },
+export default {
+    emits: ['change:theme'],
     components: {
         HeaderSection,
         HeroSection,