diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 32842f96c..dad90b25f 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -190,7 +190,7 @@ td .nz-icon-gear:before{
 }
 .el-textarea {
   .el-textarea__inner {
-    background-color: $--input-background-color !important;
+    background-color: $--background-color-empty !important;
   }
   .el-input__count {
     background-color: $--input-background-color !important;
@@ -253,43 +253,6 @@ td .nz-icon-gear:before{
 .el-scrollbar {
   background-color: $--background-color-empty;
 }
-/* el-picker 下拉时间选择器 */
-.el-picker-panel__footer {
-  border-top: 1px solid $--border-color-light !important;
-  span {
-    color: $--color-text-regular !important;
-  }
-  .el-button--text {
-    span {
-      color: $--color-primary !important;
-    }
-  }
-  .el-button--default {
-    margin-left: 10px;
-    color: $--button-primary-color !important;
-    background: $--picker-page-background-color !important;
-    border: 1px solid $--border-color-light !important;
-  }
-  .el-button.is-plain:hover {
-    background-color: $--picker-page-background-color !important;
-    border-color: $--picker-page-btn-border-color !important;
-    span {
-      color: $--picker-page-btn-color !important;
-    }
-  }
-}
-.el-date-range-picker__time-header {
-  border-bottom: 1px solid $--border-color-light;
-}
-.el-date-range-picker__content.is-left {
-  border-right: 1px solid $--border-color-light;
-}
-.el-date-table th {
-  border-bottom: 1px solid $--border-color-light !important;
-}
-.el-date-picker__time-header {
-  border-bottom: 1px solid $--picker-page-border-color !important;
-}
 .el-input-group.el-input-group--prepend,.query-input-inactive.el-input {
   .el-input-group__prepend {
     background-color: $--background-color-empty;
@@ -311,6 +274,55 @@ td .nz-icon-gear:before{
     border-bottom: 1px solid $--border-color-light;
   }
 }
+.el-dialog__wrapper.nz-dialog {
+  .el-upload-dragger {
+    background-color: $--background-color-empty;
+    border: 1px dashed $--border-color-light;
+  }
+  .el-upload-dragger:hover {
+    border: 1px dashed $--color-primary;
+  }
+  .el-message-box__btns {
+    .el-button {
+      background-color: $--background-color-empty;
+      border: 1px solid $--border-color-light;
+    }
+    .el-button:hover {
+      border: 1px solid $--color-primary;
+    }
+    .el-button:nth-of-type(3) {
+      margin-left: 10px;
+    }
+    .nz-btn.nz-btn-size-normal {
+      background-color: $--color-warning;
+      border: 1px solid $--color-warning;
+      color: $--button-primary-color;
+    }
+    .nz-btn.nz-btn-size-normal:hover {
+      background-color: #fe9f37;
+    }
+  }
+}
+.el-dialog {
+  .el-radio-button {
+    width: 142px;
+    .el-radio-button__inner {
+      width: 100%;
+      background-color: $--popover-background-color;
+      border-color: $--border-color-light;
+    }
+  }
+  .el-radio-button.is-active .el-radio-button__inner{
+    background-color: $--color-warning;
+    border-color: $--color-warning;
+  }
+}
+.switch-open {
+  background-color: $--color-primary;
+}
+.switch-shut {
+  background-color: $--switch-background-color;
+}
 //.editor-core {
 //  p {
 //    color: $--color-text-regular;
diff --git a/nezha-fronted/src/assets/css/common/checkbox.scss b/nezha-fronted/src/assets/css/common/checkbox.scss
index af1a7d49e..7bf2ac711 100644
--- a/nezha-fronted/src/assets/css/common/checkbox.scss
+++ b/nezha-fronted/src/assets/css/common/checkbox.scss
@@ -22,4 +22,5 @@
 
 .el-checkbox__inner, .el-input__inner {
   border-color: $--checkbox-border-color;
+  background-color: $--background-color-empty;
 }
diff --git a/nezha-fronted/src/assets/css/components/common/picker/picker.scss b/nezha-fronted/src/assets/css/components/common/picker/picker.scss
new file mode 100644
index 000000000..5ab8657e3
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/common/picker/picker.scss
@@ -0,0 +1,47 @@
+/* el-picker 下拉时间选择器 */
+.el-picker-panel {
+  background-color: $--background-color-empty;
+}
+.el-picker-panel__footer {
+  border-top: 1px solid $--border-color-light !important;
+  background-color: $--background-color-empty;
+  span {
+    color: $--color-text-regular !important;
+  }
+  .el-button--text {
+    span {
+      color: $--color-primary !important;
+    }
+  }
+  .el-button--default {
+    margin-left: 10px;
+    color: $--button-primary-color !important;
+    background: $--picker-page-background-color !important;
+    border: 1px solid $--border-color-light !important;
+  }
+  .el-button.is-plain:hover {
+    background-color: $--picker-page-background-color !important;
+    border-color: $--picker-page-btn-border-color !important;
+    span {
+      color: $--picker-page-btn-color !important;
+    }
+  }
+}
+.el-date-table td.in-range div {
+  background-color: $--export-span-background-color;
+}
+.el-date-table td.in-range div:hover {
+  background-color: $--export-span-background-color;
+}
+.el-date-range-picker__time-header {
+  border-bottom: 1px solid $--border-color-light;
+}
+.el-date-range-picker__content.is-left {
+  border-right: 1px solid $--border-color-light;
+}
+.el-date-table th {
+  border-bottom: 1px solid $--border-color-light !important;
+}
+.el-date-picker__time-header {
+  border-bottom: 1px solid $--picker-page-border-color !important;
+}
diff --git a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
index e8e45396a..4b21f2515 100644
--- a/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
+++ b/nezha-fronted/src/assets/css/components/common/v-selectpagenew/selectpage.scss
@@ -1,5 +1,5 @@
-.el-picker-panel,.sp-base.sp-inputs,.sp-base.sp-input,.el-picker-panel__footer{
-  background: $--input-background-color !important;
+.sp-base.sp-inputs,.sp-base.sp-input{
+  background: $--background-color-empty !important;
 }
 .sp-search,.sp-result-area,.sp-pagination {
   background-color: $--background-color-empty !important;
@@ -20,7 +20,7 @@
 }
 .sp-selected-tag {
   color: $--color-text-regular !important;
-  background-color: $--select-page-tag-background-color !important;
+  background-color: $--background-color-base !important;
   i {
     color: $--color-text-regular !important;
   }
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index e557e7927..a635f8b58 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -89,4 +89,6 @@
 
 @import 'common/v-selectpagenew/selectpage.scss';
 
-@import "common/paramBpx/paramBox";
+@import "common/paramBpx/paramBox.scss";
+
+@import "common/picker/picker.scss";
diff --git a/nezha-fronted/src/assets/css/components/page/config/system.scss b/nezha-fronted/src/assets/css/components/page/config/system.scss
index 06fa6a237..7bac52c0b 100644
--- a/nezha-fronted/src/assets/css/components/page/config/system.scss
+++ b/nezha-fronted/src/assets/css/components/page/config/system.scss
@@ -9,6 +9,16 @@
       background-color: $--background-color-base;
     }
   }
+  .half-form-item.el-form-item {
+    display: inline-block;
+    width: 230px;
+    .el-form-item__content {
+      width: 230px;
+      .el-input.el-input--small,.el-input.el-input-group--append {
+        width: calc(100% - 18px);
+      }
+    }
+  }
 }
 .system-config-form{
   width: 61.8% !important;
@@ -300,13 +310,3 @@
   font-size: 12px;
   line-height: 20px;
 }
-.half-form-item.el-form-item {
-  display: inline-block;
-  width: 230px;
-  .el-form-item__content {
-    width: 230px;
-   .el-input.el-input--small,.el-input.el-input-group--append {
-     width: calc(100% - 18px);
-   }
-  }
-}
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
index 648167351..3a5de955e 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/panel.scss
@@ -23,6 +23,27 @@
   height: calc(100% - 60px);
   flex: 1;
   background-color: $--dashboard-background-color-empty;
+  .legend--table-cell,.legend-item {
+    color: $--color-text-regular;
+  }
+  .chart__canvas {
+    div:nth-of-type(2) {
+      background-color: $--background-color-empty !important;
+      border-color: $--border-color-light !important;
+    }
+    .nz-chart__tooltip {
+      .row__label,.row__value {
+        color: $--color-text-regular;
+      }
+    }
+  }
+  .legend-container {
+    .legend--table-row.table-header {
+      .legend--table-cell {
+        color: #33a2e5;
+      }
+    }
+  }
 }
 .table-list-box {
   border-top: 1px solid $--background-color-base;
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index 522c7f547..a68732b83 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -200,6 +200,12 @@ $--guide-icon-color: $--time-picker-hover-color;
 /* detail */
 $--detail-left-background-color: $--background-color-base;
 
+/* Export */
+$--export-span-background-color: $--background-color-base;
+
+/* switch */
+$--switch-background-color: $--background-color-base;
+
 /* 13.panel */
 $--chart-title-hover-background-color: #323238;
 $--chart-box-border-color: $--border-color-light;
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index 7f649081a..a3639edc1 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -152,7 +152,6 @@ $--picker-page-btn-color: $--color-primary;
 $--picker-page-btn-border-color: $--color-primary;
 $--picker-page-btn-background-color: $--color-text-disabled;
 
-
 // icon 字色
 $--nz-icon-color: $--color-primary; //icon
 $--span-nz-icon-border-color: $--asset-label-btn-border-color;
@@ -198,12 +197,18 @@ $--guide-icon-color: $--guide-icon-border-color;
 /* detail */
 $--detail-left-background-color: $--table-row-hover-background-color;
 
+/* Export */
+$--export-span-background-color: $--background-color-base;
+
+/* switch */
+$--switch-background-color: #dcdfe6;
+
 /* 13.panel */
 $--chart-title-hover-background-color: $--background-color-1;
 $--chart-box-border-color: $--border-color-light;
 
 /* 14.popover */
-$--popover-background-color: $--background-color-empty;
+$--popover-background-color: $--color-text-disabled;
 
 /* 15.侧滑 */
 $--right-box-shadow: -3px 0 8px -3px #ccc;
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 40633dcd2..0a9ce2def 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1415,10 +1415,10 @@ li {
     color: $--color-primary !important;;
   }
 }
-/deep/ .el-input__inner{
+.el-input__inner{
   border-radius: 2px;
 }
-/deep/ .el-input-number .el-input__inner{
+.el-input-number .el-input__inner{
   text-align: left;
 }
 
@@ -1426,11 +1426,11 @@ li {
   position: fixed !important;
   visibility: hidden;
 }
-/deep/ .el-tooltip{
+.el-tooltip{
   outline: none;
 }
 
-/deep/ .el-switch.is-checked .el-switch__core{
+.el-switch.is-checked .el-switch__core{
   border-color: $--color-primary;
   background-color: $--color-primary;
 }
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
index 088f3b298..6e891b7cd 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue
@@ -42,7 +42,7 @@
             <transition name="el-zoom-in-top">
               <div v-if="dropdownShow" class="endpoint-query-dropdown el-popover" style="right: 11px;top: 33px;">
                 <span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
-                <el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
+                <el-switch v-model="hideSameLabels" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small"></el-switch>
               </div>
             </transition>
           </button>
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index dd2c9ef21..9cea71b09 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -53,7 +53,7 @@
             <transition name="el-zoom-in-top">
               <div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
                 <span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
-                <el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
+                <el-switch v-model="hideSameLabels" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small"></el-switch>
               </div>
             </transition>
           </button>
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index 4b6b2dbba..e57944393 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -36,7 +36,8 @@
                 v-model="selection.pen.data.valueMappingShow"
                 :active-value="true"
                 :inactive-value="false"
-                active-color="#ee9d3f"
+                active-icon-class="switch-open"
+                inactive-icon-class="switch-shut"
               />
             </el-form-item>
           </el-row>
diff --git a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
index d13df133a..41ddeef5f 100644
--- a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
+++ b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
@@ -31,7 +31,8 @@
         v-model="option.grid"
         :active-value="true"
         :inactive-value="false"
-        active-color="#ee9d3f"
+        active-icon-class="switch-open"
+        inactive-icon-class="switch-shut"
         @change="changeOption('grid')">
       </el-switch>
     </div>
@@ -41,7 +42,8 @@
         v-model="option.rule"
         :active-value="true"
         :inactive-value="false"
-        active-color="#ee9d3f"
+        active-icon-class="switch-open"
+        inactive-icon-class="switch-shut"
         @change="changeOption('rule')">
       </el-switch>
     </div>
diff --git a/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue b/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
index c2e74e2b3..8bfbd57b9 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/assetTypeBox.vue
@@ -17,7 +17,8 @@
           <el-form-item :label='$t("config.assetType.vm")' prop="vm">
             <el-switch
               v-model="editAssetType.vm"
-              active-color="#ee9d3f"
+              active-icon-class="switch-open"
+              inactive-icon-class="switch-shut"
               :active-value="1"
               :inactive-value="0">
             </el-switch>
@@ -26,7 +27,8 @@
           <el-form-item :label='$t("config.assetType.vmh")' prop="vmh">
             <el-switch
               v-model="editAssetType.vmh"
-              active-color="#ee9d3f"
+              active-icon-class="switch-open"
+              inactive-icon-class="switch-shut"
               :active-value="1"
               :inactive-value="0">
             </el-switch>
@@ -41,7 +43,8 @@
           <el-form-item :label='$t("config.assetType.snmpEnable")' prop="snmpEnable">
             <el-switch
               v-model="editAssetType.snmpEnable"
-              active-color="#ee9d3f"
+              active-icon-class="switch-open"
+              inactive-icon-class="switch-shut"
               :active-value="1"
               :inactive-value="0">
             </el-switch>
@@ -50,7 +53,8 @@
           <el-form-item :label='$t("config.assetType.snmpCollect")' prop="snmpCollect">
             <el-switch
               v-model="editAssetType.snmpCollect"
-              active-color="#ee9d3f"
+              active-icon-class="switch-open"
+              inactive-icon-class="switch-shut"
               :active-value="1"
               :inactive-value="0">
             </el-switch>
@@ -59,7 +63,8 @@
           <el-form-item :label='$t("config.assetType.sshCollect")' prop="sshCollect">
             <el-switch
               v-model="editAssetType.sshCollect"
-              active-color="#ee9d3f"
+              active-icon-class="switch-open"
+              inactive-icon-class="switch-shut"
               :active-value="1"
               :inactive-value="0">
             </el-switch>
diff --git a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
index 695590f15..8fd77fcb7 100644
--- a/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/administration/userBox.vue
@@ -87,7 +87,7 @@
           </el-form-item>
           <!--enable-->
           <el-form-item :label="$t('config.user.state')">
-            <el-switch id="account-input-status" v-model="editUser.status" :disabled="isCurrentUser(editUser.username) || (editUser.username==='admin' && editUser.id==1) " active-color="#ee9d3f" active-value="1"
+            <el-switch id="account-input-status" v-model="editUser.status" :disabled="isCurrentUser(editUser.username) || (editUser.username==='admin' && editUser.id==1) " active-icon-class="switch-open" inactive-icon-class="switch-shut" active-value="1"
                        inactive-value="0">
             </el-switch>
           </el-form-item>
diff --git a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
index 6026ef01d..5e3de2b63 100644
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
@@ -248,7 +248,7 @@
                 </el-popover>
               </div>
               <div>
-                <el-switch v-model="editAsset.clientEnable" :active-value="1" :inactive-value="0" active-color="#ee9d3f" size="small"></el-switch>
+                <el-switch v-model="editAsset.clientEnable" :active-value="1" :inactive-value="0" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small"></el-switch>
               </div>
             </div>
             <transition name="el-zoom-in-top">
diff --git a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
index b8b7f3d4c..8bf0b65c4 100644
--- a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
@@ -28,7 +28,8 @@
               <el-switch
                 @change="switchSearch"
                 v-model="editAssetMeta.search"
-                active-color="#ee9d3f"
+                active-icon-class="switch-open"
+                inactive-icon-class="switch-shut"
                 active-value="1"
                 inactive-value="0">
               </el-switch>
@@ -36,7 +37,8 @@
             <el-form-item :label='$t("config.assetLabel.display")' prop="display">
               <el-switch
                 v-model="editAssetMeta.display"
-                active-color="#ee9d3f"
+                active-icon-class="switch-open"
+                inactive-icon-class="switch-shut"
                 active-value="1"
                 inactive-value="0">
               </el-switch>
@@ -103,7 +105,8 @@
                   <el-switch
                     v-model="editAssetMeta.param.interval"
                     @change="$forceUpdate()"
-                    active-color="#ee9d3f">
+                    active-icon-class="switch-open"
+                    inactive-icon-class="switch-shut">
                   </el-switch>
                 </el-row>
               </div>
diff --git a/nezha-fronted/src/components/common/rightBox/assetStateBox.vue b/nezha-fronted/src/components/common/rightBox/assetStateBox.vue
index ae85231b1..dc7066105 100644
--- a/nezha-fronted/src/components/common/rightBox/assetStateBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetStateBox.vue
@@ -24,19 +24,19 @@
         </el-form-item>
         <!--ping-->
         <el-form-item label="Ping">
-          <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" id="asset-state-ping-status"
+          <el-switch :active-value="1" :inactive-value="0" active-icon-class="switch-open" inactive-icon-class="switch-shut" id="asset-state-ping-status"
                      v-model="editAssetState.ping">
           </el-switch>
         </el-form-item>
         <!--monitor-->
         <el-form-item :label="$t('config.assetState.monitor')">
-          <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" id="asset-state-monitor-status"
+          <el-switch :active-value="1" :inactive-value="0" active-icon-class="switch-open" inactive-icon-class="switch-shut" id="asset-state-monitor-status"
                      v-model="editAssetState.monitor">
           </el-switch>
         </el-form-item>
         <!--alert-->
         <el-form-item :label="$t('config.assetState.alert')">
-          <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" id="asset-state-alert-status"
+          <el-switch :active-value="1" :inactive-value="0" active-icon-class="switch-open" inactive-icon-class="switch-shut" id="asset-state-alert-status"
                      v-model="editAssetState.alert">
           </el-switch>
         </el-form-item>
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index ac63c8dcc..78b6c8539 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -45,7 +45,8 @@
                 v-model="editDc.state"
                 active-value="ON"
                 inactive-value="OFF"
-                active-color="#ee9d3f"
+                active-icon-class="switch-open"
+                inactive-icon-class="switch-shut"
               >
               </el-switch>
             </el-form-item>
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
index d559d6ff7..a4582df63 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBoxNew.vue
@@ -105,7 +105,7 @@
               <i class="nz-icon nz-icon-arrow-down" :class="metricsShow?'':'is-active'" @click="metricsShow = !metricsShow"></i>
              {{$t('project.endpoint.metrics')}}
             </span>
-            <el-switch v-model="editEndpoint.configs[0].enable"  active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
+            <el-switch v-model="editEndpoint.configs[0].enable"  active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small" :active-value="1" :inactive-value="0"></el-switch>
           </div>
           <transition name="el-zoom-in-top">
             <el-tabs v-model="activeName" v-show="metricsShow" v-if="editEndpoint.configs[0].enable">
@@ -346,7 +346,7 @@
                <i class="nz-icon nz-icon-arrow-down" :class="logsShow?'':'is-active'" @click="logsShow = !logsShow"></i>
              {{$t('project.endpoint.logs')}}
             </span>
-            <el-switch v-model="editEndpoint.configs[1].enable"  active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
+            <el-switch v-model="editEndpoint.configs[1].enable" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small" :active-value="1" :inactive-value="0"></el-switch>
           </div>
           <transition name="el-zoom-in-top">
             <div v-show="logsShow" v-if="editEndpoint.configs[1].enable">
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 6b12023f9..5096490eb 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -86,7 +86,7 @@
               <i class="nz-icon nz-icon-arrow-down" :class="metricsShow?'':'is-active'" @click="metricsShow = !metricsShow"></i>
               {{$t('project.endpoint.metrics')}}
             </span>
-            <el-switch v-model="editModule.configs[0].enable"  active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
+            <el-switch v-model="editModule.configs[0].enable" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small" :active-value="1" :inactive-value="0"></el-switch>
           </div>
           <transition name="el-zoom-in-top">
             <el-tabs v-model="activeName" v-show="metricsShow" v-if="editModule.configs[0].enable">
@@ -326,7 +326,7 @@
                <i class="nz-icon nz-icon-arrow-down" :class="logsShow?'':'is-active'" @click="logsShow = !logsShow"></i>
               {{$t('project.endpoint.logs')}}
             </span>
-            <el-switch v-model="editModule.configs[1].enable"  active-color="#ee9d3f" size="small" :active-value="1" :inactive-value="0"></el-switch>
+            <el-switch v-model="editModule.configs[1].enable" active-icon-class="switch-open" inactive-icon-class="switch-shut" size="small" :active-value="1" :inactive-value="0"></el-switch>
           </div>
           <transition name="el-zoom-in-top">
           <div v-show="logsShow" v-if="editModule.configs[1].enable">
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
index fe1099e64..8076825c2 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -75,7 +75,8 @@
                   style="margin-left: 14px"
                   slot="reference"
                   v-model="scope.row.schedEnable"
-                  active-color="#ee9d3f"
+                  active-icon-class="switch-open"
+                  inactive-icon-class="switch-shut"
                   :active-value="1"
                   :inactive-value="0"
                   @change="(val)=>{$emit('statusChange', scope.row)}"
diff --git a/nezha-fronted/src/components/page/config/assetState.vue b/nezha-fronted/src/components/page/config/assetState.vue
index 228e0a384..0e3d2d2b2 100644
--- a/nezha-fronted/src/components/page/config/assetState.vue
+++ b/nezha-fronted/src/components/page/config/assetState.vue
@@ -61,7 +61,8 @@
                 :active-value="1"
                 :disabled="!hasButton('assetState_toEdit')"
                 :inactive-value="0"
-                active-color="#ee9d3f"
+                active-icon-class="switch-open"
+                inactive-icon-class="switch-shut"
                 @change="(val)=>{statusChange(scope.row)}">
               </el-switch>
               <el-switch
@@ -70,7 +71,8 @@
                 :active-value="1"
                 :disabled="!hasButton('assetState_toEdit')"
                 :inactive-value="0"
-                active-color="#ee9d3f"
+                active-icon-class="switch-open"
+                inactive-icon-class="switch-shut"
                 @change="(val)=>{statusChange(scope.row)}">
               </el-switch>
               <el-switch
@@ -79,7 +81,8 @@
                 :active-value="1"
                 :disabled="!hasButton('assetState_toEdit')"
                 :inactive-value="0"
-                active-color="#ee9d3f"
+                active-icon-class="switch-open"
+                inactive-icon-class="switch-shut"
                 @change="(val)=>{statusChange(scope.row)}">
               </el-switch>
               <span v-else>{{scope.row[item.prop]}}</span>
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index 491658537..81fc85c81 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -68,17 +68,17 @@
               <el-input v-model.number="basic.default_cabinet_usize" id="system-baisc-default_cabinet_usize"></el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.basic.unsaved')" prop="unsaved_change">
-              <el-switch v-model="basic.unsaved_change" active-color="rgb(238, 157, 63)"  active-value='on' inactive-value='off' id="system-baisc-unsaved_change">
+              <el-switch v-model="basic.unsaved_change" active-icon-class="switch-open" inactive-icon-class="switch-shut"  active-value='on' inactive-value='off' id="system-baisc-unsaved_change">
               </el-switch>
             </el-form-item>
             <div class="system-title">{{$t('config.system.basic.pinPolicy')}}&nbsp;<span class="el-form-item__tip">({{$t('config.system.basic.pinPolicyValue')}})</span></div>
             <el-form-item :label="$t('config.system.basic.gloEnable')" prop="mfa_auth_enable">
-              <el-switch v-model="basic.mfa_auth_enable" active-color="rgb(238, 157, 63)"  :active-value='"1"' :inactive-value='"0"' id="system-basic-mfs_change">
+              <el-switch v-model="basic.mfa_auth_enable" active-icon-class="switch-open" inactive-icon-class="switch-shut"  :active-value='"1"' :inactive-value='"0"' id="system-basic-mfs_change">
               </el-switch>
 <!--              <div class="el-form-item__tip">{{$t('config.system.basic.TwoFactorAuthentication')}}</div>-->
             </el-form-item>
             <el-form-item :label="$t('config.system.basic.enable')" prop="enable">
-              <el-switch v-model="basic.pin_policy.enable" active-color="rgb(238, 157, 63)"  active-value='1' inactive-value='0' id="system-basic-enable">
+              <el-switch v-model="basic.pin_policy.enable" active-icon-class="switch-open" inactive-icon-class="switch-shut"  active-value='1' inactive-value='0' id="system-basic-enable">
               </el-switch>
             </el-form-item>
             <el-form-item :label="$t('config.system.basic.length')" prop="length">
diff --git a/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue b/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
index 24aad0d50..f251035e7 100644
--- a/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
+++ b/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
@@ -53,11 +53,11 @@
                 </el-select>
               </el-popover>
             </template>
-            <template v-if="item.prop == 'state'"><el-switch v-model="scope.row.state" active-color="#ee9d3f" :active-value="1" :inactive-value="0" /></template>
+            <template v-if="item.prop == 'state'"><el-switch v-model="scope.row.state" active-icon-class="switch-open" inactive-icon-class="switch-shut" active-color="#ee9d3f" :active-value="1" :inactive-value="0" /></template>
           </template>
           <template v-else>
             <template v-if="item.prop == 'state'">
-              <el-switch :disabled="true" v-model="scope.row.state" active-color="#ee9d3f" :active-value="1" :inactive-value="0" />
+              <el-switch :disabled="true" v-model="scope.row.state" active-icon-class="switch-open" inactive-icon-class="switch-shut" :active-value="1" :inactive-value="0" />
             </template>
             <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
             <template v-else>-</template>
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 1dcb3e250..f2c9ed34f 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -165,7 +165,8 @@
                          v-model="editChart.param.time"
                          :active-value="true"
                          :inactive-value="false"
-                         active-color="#ee9d3f"
+                         active-icon-class="switch-open"
+                         inactive-icon-class="switch-shut"
                          size="small"></el-switch>
             </el-form-item>
             <el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.descending")' prop="param.descending">
@@ -173,7 +174,8 @@
                          v-model="editChart.param.descending"
                          :active-value="true"
                          :inactive-value="false"
-                         active-color="#ee9d3f"
+                         active-icon-class="switch-open"
+                         inactive-icon-class="switch-shut"
                          size="small"></el-switch>
             </el-form-item>
             <el-form-item class="form-item--half-width" v-if="editChart.type == 'logs'" :label='$t("dashboard.panel.chartForm.wrapLines")' prop="param.wrapLines">
@@ -181,7 +183,8 @@
                          v-model="editChart.param.wrapLines"
                          :active-value="true"
                          :inactive-value="false"
-                         active-color="#ee9d3f"
+                         active-icon-class="switch-open"
+                         inactive-icon-class="switch-shut"
                          size="small"></el-switch>
             </el-form-item>
           </div>
@@ -325,7 +328,8 @@
                   <el-switch
                     :id="'chart-box-legendValue-'+item.label"
                     v-model="editChart.param.legendValue[item.key]"
-                    active-color="#ee9d3f"
+                    active-icon-class="switch-open"
+                    inactive-icon-class="switch-shut"
                     active-value="on"
                     inactive-value="off"
                   >
diff --git a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
index 33118f3df..538d39680 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue
@@ -7,6 +7,8 @@
         <span class="operation-label">{{$t('overall.time')}}</span>
         <el-switch
           v-model="time"
+          active-icon-class="switch-open"
+          inactive-icon-class="switch-shut"
         >
         </el-switch>
       </div>
@@ -14,6 +16,8 @@
         <span class="operation-label">{{$t('dashboard.explore.descending')}}</span>
         <el-switch
           v-model="operations.descending"
+          active-icon-class="switch-open"
+          inactive-icon-class="switch-shut"
         >
         </el-switch>
       </div>
@@ -21,6 +25,8 @@
         <span class="operation-label">{{$t('dashboard.explore.wrapLines')}}</span>
         <el-switch
           v-model="wrapLines"
+          active-icon-class="switch-open"
+          inactive-icon-class="switch-shut"
         >
         </el-switch>
       </div>