[fix]:theme header color

TankNee · Jul 8, 2021 · 6c20434 · 6c20434
1 parent 0d90d5c
commit 6c20434
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 7 deletions.
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -40,8 +40,15 @@
     >
       <q-icon name="account_tree" color="#16A2B8" />
       <q-tooltip
+        v-if='darkMode'
         :offset="[20, 10]"
-        content-class="bg-accent text-white shadow-4 text-h7"
+        content-class="bg-darkMode text-white shadow-4 text-h7"
+        >{{ $t('noteCategory') }}
+      </q-tooltip>
+      <q-tooltip
+        v-else
+        :offset="[20, 10]"
+        content-class="bg-light text-white shadow-4 text-h7"
         >{{ $t('noteCategory') }}
       </q-tooltip>
     </q-avatar>
@@ -62,8 +69,15 @@
     >
       <q-icon name="local_offer" color="#16A2B8" />
       <q-tooltip
+        v-if="darkMode"
         :offset="[20, 10]"
-        content-class="bg-amber-6 text-white shadow-4  text-h7"
+        content-class="bg-darkMode text-white shadow-4  text-h7"
+        >{{ $t('tag') }}
+      </q-tooltip>
+      <q-tooltip
+        v-else
+        :offset="[20, 10]"
+        content-class="bg-light text-white shadow-4  text-h7"
         >{{ $t('tag') }}
       </q-tooltip>
     </q-avatar>
@@ -79,8 +93,15 @@
     >
       <q-icon :name="enablePreviewEditor ? 'lock_open' : 'lock'" color="#16A2B8" />
       <q-tooltip
+        v-if="darkMode"
+        :offset="[20, 10]"
+        content-class="bg-darkMode text-white shadow-4  text-h7"
+        >{{ enablePreviewEditor ? $t('lock') : $t('unlock') }}
+      </q-tooltip>
+      <q-tooltip
+        v-else
         :offset="[20, 10]"
-        content-class="bg-amber-9 text-white shadow-4  text-h7"
+        content-class="bg-light text-white shadow-4  text-h7"
         >{{ enablePreviewEditor ? $t('lock') : $t('unlock') }}
       </q-tooltip>
     </q-avatar>
@@ -92,8 +113,15 @@
     >
       <img :src="avatarUrl ? avatarUrl : defaultAvatar" />
       <q-tooltip
+        v-if="darkMode"
+        :offset="[20, 10]"
+        content-class="bg-darkMode text-white shadow-4 text-h7"
+        >{{ isLogin ? $t('logout') : $t('login') }}
+      </q-tooltip>
+      <q-tooltip
+        v-else
         :offset="[20, 10]"
-        content-class="bg-green-7 text-white shadow-4 text-h7"
+        content-class="bg-light text-white shadow-4 text-h7"
         >{{ isLogin ? $t('logout') : $t('login') }}
       </q-tooltip>
     </q-avatar>
@@ -126,8 +154,15 @@
         />
       </template>
       <q-tooltip
+        v-if="darkMode"
+        :offset="[20, 10]"
+        content-class="bg-darkMode text-white shadow-4  text-h7"
+        >{{ $t('search') }}
+      </q-tooltip>
+      <q-tooltip
+        v-else
         :offset="[20, 10]"
-        content-class="bg-amber-2 text-black shadow-4  text-h7"
+        content-class="bg-light text-white shadow-4  text-h7"
         >{{ $t('search') }}
       </q-tooltip>
     </q-input>
@@ -159,8 +194,15 @@
     >
       <q-icon name="table_chart" />
       <q-tooltip
+        v-if="darkMode"
         :offset="[20, 10]"
-        content-class="bg-brown-4 text-white shadow-4 text-h7"
+        content-class="bg-darkMode text-white shadow-4 text-h7"
+        >{{ $t('switchView') }}
+      </q-tooltip>
+      <q-tooltip
+        v-else
+        :offset="[20, 10]"
+        content-class="bg-light text-white shadow-4 text-h7"
         >{{ $t('switchView') }}
       </q-tooltip>
     </q-avatar>
@@ -171,7 +213,10 @@
       @click="$refs.settingsDialog.toggle()"
     >
       <q-icon name="settings" />
-      <q-tooltip :offset="[20, 10]" content-class="text-white shadow-4 text-h7"
+      <q-tooltip v-if="darkMode" :offset="[20, 10]" content-class="text-white shadow-4 text-h7 bg-darkMode"
+        >{{ $t('settings') }}
+      </q-tooltip>
+      <q-tooltip v-else :offset="[20, 10]" content-class="text-white shadow-4 text-h7 bg-light"
         >{{ $t('settings') }}
       </q-tooltip>
     </q-avatar>
@@ -344,6 +389,7 @@ export default {
 </script>
 
 <style scoped>
+@import '../css/style.css';
 .header-note-title {
   display: flex;
   align-items: center;

diff --git a/src/css/style.css b/src/css/style.css
@@ -221,3 +221,11 @@ body > div.q-dialog.fullscreen.no-pointer-events.q-dialog--modal > div.q-dialog_
 .save-dot.show {
   visibility: visible;
 }
+
+.bg-light {
+  background-color: #1976D2;
+}
+
+.bg-darkMode {
+  background-color: #F2c037;
+}