From f2aaf1378c121f703d54ec534c6ef5747796d6c3 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Wed, 8 Nov 2023 11:57:20 +0800
Subject: [PATCH] feat: selector theme

---
 src/layout/components/NavBar.vue             |  2 +-
 src/styles/index.ts                          |  1 +
 src/styles/theme.scss                        | 59 +++++++++++++++-----
 src/views/dashboard/panel/Tool.vue           |  2 +-
 src/views/dashboard/related/trace/Header.vue |  4 +-
 5 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 03e7db0a..d49f4e7f 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -55,7 +55,7 @@ limitations under the License. -->
         <el-switch v-model="theme" active-text="D" inactive-text="L" size="small" inline-prompt @change="changeTheme" />
       </span>
       <span class="version ml-5 cp">
-        <el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version">
+        <el-popover trigger="hover" width="250" placement="bottom" :content="appStore.version">
           <template #reference>
             <span>
               <Icon iconName="info_outline" size="middle" />
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 7ebc5e05..ccf23d4e 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -18,6 +18,7 @@ import "element-plus/es/components/message/style/css";
 import "element-plus/es/components/message-box/style/css";
 import "element-plus/es/components/notification/style/css";
 import "element-plus/es/components/drawer/style/css";
+// import "element-plus/theme-chalk/src/dark/vars.css";
 import "./grid.scss";
 import "./lib.scss";
 import "./reset.scss";
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 89caed87..4045fb6b 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -30,6 +30,11 @@
   --el-input-bg-color: #fff;
   --el-input-text-color: #3d444f;
   --box-shadow-color: #ccc;
+  --el-border-color-light: #e4e7ed;
+  --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  --el-bg-color: #f5f7fa;
+  --el-text-color-placeholder: #c0c4cc;
+  --el-box-shadow-light: 0 2px 12px 0 rgba(255, 255, 255, 0.1);
 }
 
 .dark {
@@ -46,7 +51,12 @@
   --el-switch-off: #999;
   --el-input-bg-color: #212224;
   --el-input-text-color: #fafbfc;
-  --box-shadow-color: #888;
+  --box-shadow-color: #666;
+  --el-border-color-light: #36383d;
+  --el-box-shadow-light: 0 2px 12px 0 rgba(255, 255, 255, 0.1);
+  --el-bg-color: #4b4b52;
+  --el-text-color-placeholder: #c0c4cc;
+  --el-box-shadow-light: 0 3px 3px 0 rgba(255, 255, 255, 0.1);
 }
 
 .el-switch {
@@ -70,20 +80,43 @@
 .el-input {
   --el-input-bg-color: var(--el-input-bg-color);
   color: var(--el-input-text-color);
-  // --el-input-text-color: var(--el-input-text-color);
-  //   --el-input-border: var(--el-border-base);
-  //   --el-input-hover-border: var(--el-border-color-hover);
-  //   --el-input-focus-border: var(--el-color-primary);
-  //   --el-input-transparent-border: 0 0 0 1px transparent inset;
-  //   --el-input-border-color: var(--el-border-color-base);
-  //   --el-input-border-radius: var(--el-border-radius-base);
-  //   --el-input-icon-color: var(--el-text-color-placeholder);
-  //   --el-input-placeholder-color: var(--el-text-color-placeholder);
-  //   --el-input-hover-border-color: var(--el-border-color-hover);
-  //   --el-input-clear-hover-color: var(--el-text-color-secondary);
-  //   --el-input-focus-border-color: var(--el-color-primary);
 }
 
+.el-select__popper.el-popper[role="tooltip"] {
+  background: var(--theme-background);
+  border: 1px solid var(--el-border-color-light);
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.el-popper.is-light .el-popper__arrow::before {
+  border: 1px solid var(--el-border-color-light);
+  background: var(--theme-background);
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background-color: var(--el-bg-color);
+}
+
+.el-pagination {
+  --el-pagination-bg-color: var(--theme-background);
+  --el-pagination-text-color: var(--font-color);
+}
+
+.el-pagination button:disabled {
+  background-color: var(--theme-background);
+}
+
+// .el-popover {
+//   --el-popover-bg-color: var(--theme-background);
+//   --el-popover-border-color: var(--theme-background);
+// }
+
+// .el-popover.el-popper {
+//   color: var(--font-color);
+//   box-shadow: var(--el-box-shadow-light);
+// }
+
 $box-shadow-color: var(--box-shadow-color);
 $border-color-primary: var(--border-color-primary);
 $layout-background: var(--layout-background);
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 5802faa7..ec3cc1fe 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -109,7 +109,7 @@ limitations under the License. -->
             </el-dropdown-menu>
           </template>
         </el-dropdown>
-        <el-tooltip content="Apply" placement="bottom" effect="light">
+        <el-tooltip content="Apply" placement="bottom">
           <i @click="applyDashboard">
             <Icon class="icon-btn" size="sm" iconName="save" />
           </i>
diff --git a/src/views/dashboard/related/trace/Header.vue b/src/views/dashboard/related/trace/Header.vue
index a4a7cb24..f845ebbb 100644
--- a/src/views/dashboard/related/trace/Header.vue
+++ b/src/views/dashboard/related/trace/Header.vue
@@ -31,7 +31,7 @@ limitations under the License. -->
       @change="changeLatency"
       class="ml-10"
     />
-    <el-popover trigger="hover" width="250" placement="bottom" effect="light">
+    <el-popover trigger="hover" width="250" placement="bottom">
       <template #reference>
         <div class="cp conditions-popup">
           <Icon iconName="conditions" size="middle" />
@@ -52,7 +52,7 @@ limitations under the License. -->
         </div>
       </div>
     </el-popover>
-    <el-popover trigger="hover" width="250" placement="bottom" effect="light">
+    <el-popover trigger="hover" width="250" placement="bottom">
       <template #reference>
         <div class="cp metric-value">
           <Icon iconName="info_outline" size="middle" />