From 6f1e3dc3ae718996d273db56fe04bf924040871f Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Thu, 9 Nov 2023 12:05:16 +0800
Subject: [PATCH] feat: add tool icons style

---
 src/styles/theme.scss              | 8 ++++++++
 src/views/dashboard/panel/Tool.vue | 6 +++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 92334075..5eb015d8 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -31,6 +31,9 @@ html {
   --sw-bg-color-overlay: #fff;
   --sw-border-color-light: #e4e7ed;
   --popper-hover-bg: #eee;
+  --sw-icon-btn-bg: #eee;
+  --sw-icon-btn-color: #666;
+  --sw-icon-btn-border: #ccc;
 }
 
 html.dark {
@@ -47,6 +50,9 @@ html.dark {
   --sw-bg-color-overlay: #1d1e1f;
   --sw-border-color-light: #414243;
   --popper-hover-bg: rgb(64, 158, 255, 0.1);
+  --sw-icon-btn-bg: #222;
+  --sw-icon-btn-color: #ccc;
+  --sw-icon-btn-border: #999;
 }
 
 .el-popper.is-light {
@@ -58,6 +64,8 @@ html.dark {
   --el-switch-off-color: #aaa;
 }
 
+$tool-icon-btn-bg: var(--sw-icon-btn-bg);
+$tool-icon-btn-color: var(--sw-icon-btn-color);
 $popper-hover-bg-color: var(--popper-hover-bg);
 $box-shadow-color: var(--box-shadow-color);
 $border-color-primary: var(--border-color-primary);
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index ec3cc1fe..619becdb 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -766,12 +766,12 @@ limitations under the License. -->
     display: inline-block;
     padding: 3px;
     text-align: center;
-    border: 1px solid $disabled-color;
+    border: 1px solid var(--sw-icon-btn-border);
     border-radius: 3px;
     margin-left: 6px;
     cursor: pointer;
-    background-color: #eee;
-    color: #666;
+    background-color: var(--sw-icon-btn-bg);
+    color: var(--sw-icon-btn-color);
     font-size: $font-size-smaller;
   }