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

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

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

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) => {

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>

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 {