feat: selector theme

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" />

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

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

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>

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" />