From 33e04588a934c6745075ba7bd21440cfefa8cfdf Mon Sep 17 00:00:00 2001
From: Sai Nikhil <nikhil@openobserve.ai>
Date: Wed, 19 Nov 2025 20:01:25 +0530
Subject: [PATCH] fix: watch for theme changes at app level to sync with other
 pages (#9198)

This PR fixes 4th issue in
https://github.com/openobserve/openobserve/issues/9138
---
 web/src/components/AppTable.vue         |  4 ++--
 web/src/components/PredefinedThemes.vue |  4 ++--
 web/src/components/ThemeSwitcher.vue    | 10 +++++++++-
 web/src/plugins/logs/SearchBar.vue      |  6 ++----
 web/src/styles/app.scss                 |  2 +-
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/web/src/components/AppTable.vue b/web/src/components/AppTable.vue
index 975acacbda..e9e4a05ef3 100644
--- a/web/src/components/AppTable.vue
+++ b/web/src/components/AppTable.vue
@@ -49,7 +49,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <template v-slot:header="props">
         <q-tr
           :props="props"
-          class="!tw-bg-[var(--o2-hover-accent)]"
+          class="!tw-bg-[var(--o2-table-header-bg)]"
         >
           <q-th
             v-for="col in props.cols"
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :class="col.classes || ''"
             :props="props"
             :style="col.style"
-            class="!tw-bg-[var(--o2-hover-accent)]"
+            class="!tw-bg-[var(--o2-table-header-bg)]"
           >
             {{ col.label }}
           </q-th>
diff --git a/web/src/components/PredefinedThemes.vue b/web/src/components/PredefinedThemes.vue
index 7799df108c..3b6fd9ff11 100644
--- a/web/src/components/PredefinedThemes.vue
+++ b/web/src/components/PredefinedThemes.vue
@@ -56,7 +56,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </q-tabs>
       </q-card-section>
 
-      <q-card-section class="q-pt-none scroll-content">
+      <q-card-section class="q-pt-none scroll-content-predefined-themes">
         <q-tab-panels v-model="activeTab" animated>
           <!-- Light Mode Themes -->
           <q-tab-panel name="light" class="q-pa-none">
@@ -642,7 +642,7 @@ const resetToDefaultTheme = () => {
 </script>
 
 <style scoped>
-.scroll-content {
+.scroll-content-predefined-themes {
   max-height: calc(100vh - 100px);
   overflow-y: auto;
 }
diff --git a/web/src/components/ThemeSwitcher.vue b/web/src/components/ThemeSwitcher.vue
index 2954f74372..17967e22fe 100644
--- a/web/src/components/ThemeSwitcher.vue
+++ b/web/src/components/ThemeSwitcher.vue
@@ -68,9 +68,17 @@ export default defineComponent({
     watch(darkMode, () => {
       setTheme(darkMode.value ? "dark" : "light");
     });
+
+    // Watch store.state.theme for external changes
+    // because we re changing theme from predefinedTheme.vue or general.vue when user changes tabs we are changing the theme
     watch(
       () => store.state.theme,
-      () => {}
+      (newTheme) => {
+        const shouldBeDark = newTheme === "dark";
+        if (darkMode.value !== shouldBeDark) {
+          darkMode.value = shouldBeDark;
+        }
+      }
     );
 
     const setTheme = (theme: any) => {
diff --git a/web/src/plugins/logs/SearchBar.vue b/web/src/plugins/logs/SearchBar.vue
index 4179831472..6616010844 100644
--- a/web/src/plugins/logs/SearchBar.vue
+++ b/web/src/plugins/logs/SearchBar.vue
@@ -1375,19 +1375,17 @@ class="q-pr-sm q-pt-xs" />
           <q-btn
             unelevated
             no-caps
-            class="q-mr-sm text-bold"
+            class="q-mr-sm o2-secondary-button"
             data-test="logs-search-bar-confirm-dialog-cancel-btn"
             :label="t('confirmDialog.cancel')"
-            color="secondary"
             v-close-popup
           />
           <q-btn
             unelevated
             no-caps
-            class="q-mr-sm text-bold"
+            class="q-mr-sm o2-primary-button"
             data-test="logs-search-bar-confirm-dialog-ok-btn"
             :label="t('search.btnDownload')"
-            color="primary"
             @click="downloadRangeData"
           />
         </q-card-actions>
diff --git a/web/src/styles/app.scss b/web/src/styles/app.scss
index 89200e26cf..9bc9a77e3f 100644
--- a/web/src/styles/app.scss
+++ b/web/src/styles/app.scss
@@ -1565,7 +1565,7 @@ body {
 }
 
 .no-data-image {
-  color: var(--o2-theme-color);
+  color: var(--o2-primary-btn-bg);
 }
 
 .organization-menu-o2 .org-table {