diff --git a/nezha-fronted/src/assets/css/common/button.scss b/nezha-fronted/src/assets/css/common/button.scss
index 63e5bd07c..7247315a3 100644
--- a/nezha-fronted/src/assets/css/common/button.scss
+++ b/nezha-fronted/src/assets/css/common/button.scss
@@ -77,12 +77,6 @@
   color: $--button-gray-color;
   letter-spacing: 0;
 }
-.nz-btn.nz-btn-style-light-gray { /* 浅灰色按钮 */
-  background: $--button-light-gray-background-color;
-  border: 1px solid $--button-light-gray-border-color;
-  color: $--button-light-gray-color;
-  letter-spacing: 0;
-}
 .nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) { /* 橙色按钮hover */
   background: $--button-primary-hover-background-color;
   color: $--button-primary-color;
@@ -100,9 +94,9 @@
   letter-spacing: 0;
 }
 .nz-btn.nz-btn-style-gray:hover:not(.nz-btn-disabled) { /* 浅灰色按钮hover */
-  border: 1px solid $--button-light-gray-hover-border-color;
-  background: $--button-light-gray-hover-background-color;
-  color: $--button-light-gray-hover-color;
+  border: 1px solid $--button-gray-hover-border-color;
+  background: $--button-gray-hover-background-color;
+  color: $--button-gray-hover-color;
   letter-spacing: 0;
 }
 .nz-btn.nz-btn-style-normal:active:not(.nz-btn-disabled) { /* 橙色按钮active' */
@@ -122,9 +116,9 @@
   letter-spacing: 0;
 }
 .nz-btn.nz-btn-style-gray:active:not(.nz-btn-disabled) { /* 浅灰色按钮active*/
-  background: $--button-light-gray-active-background-color;
-  border: 1px solid $--button-light-gray-active-border-color;
-  color: $--button-light-gray-active-color;
+  background: $--button-gray-active-background-color;
+  border: 1px solid $--button-gray-active-border-color;
+  color: $--button-gray-active-color;
   letter-spacing: 0;
 }
 
diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 415f70450..5184cc4f7 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -74,25 +74,16 @@
     height: 32px;
     width: 36px;
     cursor: pointer;
-    border: 1px solid $--button-gray-border-color;
+    border: 1px solid $--button-icon-border-color;
     outline: none;
     border-radius: $--button-border-radius;
-    background-color: $--button-gray-background-color;
+    background-color: $--button-icon-background-color;
     transition: background-color linear .1s;
-    color: $--button-gray-color;
+    color: $--button-icon-color;
 
     i {
       font-size: 14px;
-      color: $--button-gray-color;
-    }
-  }
-  .top-tool-btn.top-tool-btn--light-gray {
-    border: 1px solid $--button-light-gray-border-color;
-    color: $--button-light-gray-color;
-    background-color: $--button-light-gray-background-color;
-
-    i {
-      color: $--button-light-gray-color;
+      color: $--button-icon-color;
     }
   }
   .top-tool-btn.top-tool-btn--text {
@@ -101,43 +92,25 @@
     color: $--color-text-regular;
   }
   .top-tool-btn:hover:not(.nz-btn-disabled) {
-    background-color: $--button-gray-hover-background-color;
-    border: 1px solid $--button-gray-hover-border-color;
-    color: $--button-gray-hover-color;
+    background-color: $--button-icon-hover-background-color;
+    border: 1px solid $--button-icon-hover-border-color;
+    color: $--button-icon-hover-color;
 
     i {
-      color: $--button-gray-hover-color;
+      color: $--button-icon-hover-color;
     }
   }
   .top-tool-btn:focus:not(.nz-btn-disabled), .top-tool-btn.is-focus {
-    background-color: $--button-gray-active-background-color;
-    border: 1px solid $--button-gray-active-border-color;
-    color: $--button-gray-active-color;
+    background-color: $--button-icon-active-background-color;
+    border: 1px solid $--button-icon-active-border-color;
+    color: $--button-icon-active-color;
 
     i {
-      color: $--button-gray-active-color;
-    }
-  }
-  .top-tool-btn.top-tool-btn--light-gray:hover:not(.nz-btn-disabled) {
-    background-color: $--button-gray-hover-background-color;
-    border: 1px solid $--button-gray-hover-border-color;
-    color: $--button-gray-hover-color;
-
-    i {
-      color: $--button-gray-hover-color;
-    }
-  }
-  .top-tool-btn.top-tool-btn--light-gray:focus:not(.nz-btn-disabled), .top-tool-btn.top-tool-btn--light-gray.is-focus {
-    background-color: $--button-gray-active-background-color;
-    border: 1px solid $--button-gray-active-border-color;
-    color: $--button-gray-active-color;
-
-    i {
-      color: $--button-gray-active-color;
+      color: $--button-icon-active-color;
     }
   }
   .top-tool-btn--delete.top-tool-btn:focus:not(.nz-btn-disabled) {
-    background-color: $--button-gray-hover-background-color;
+    background-color: $--button-icon-hover-background-color;
     border-color: #FFC4B9;
     i {
       color: #F0745A;
diff --git a/nezha-fronted/src/assets/css/themes/theme-dark.scss b/nezha-fronted/src/assets/css/themes/theme-dark.scss
index ef5a232c3..81b652351 100644
--- a/nezha-fronted/src/assets/css/themes/theme-dark.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-dark.scss
@@ -10,6 +10,8 @@ $--background-color-empty: #222329;
 $--background-color-base: #18171D;
 // 背景色1
 $--background-color-1: #444440;
+// 背景色2
+$--background-color-2: #000;
 
 // 左侧菜单背景色
 $--left-menu-background-color-base: $--background-color-empty;
@@ -86,32 +88,33 @@ $--dropdown-menu-box-shadow-color: rgba(8,3,3,0.77);
 $--input-background-color: $--background-color-base;
 
 /* 12.按钮 */
+// button-primary用于橙色按钮
 $--button-primary-color: #FFFFFE; // 普通按钮字色
 $--button-primary-background-color: $--color-primary; // 普通按钮背景色
 $--button-primary-hover-background-color: mix(#FFF, $--color-primary, 10%);
 $--button-primary-active-background-color: mix(#000, $--color-primary, 10%);
 
-// 黑暗模式下，灰按钮有两种色值，明亮模式下只有一种；为了区分黑暗模式的两种按钮，此处设button-gray和button-light-gray两种前缀，颜色一深一浅，明亮模式下这两种的色值是一样的；
-// button-gray用于普通列表顶部的按钮，button-light-gray用户dashboard、panel顶部按钮
-$--button-gray-color: $--color-text-secondary; // 灰色按钮字色
+// button-gray用于普通按钮
+$--button-gray-color: $--color-text-regular; // 灰色按钮字色
 $--button-gray-hover-color: mix(#FFF, $--color-primary, 15%); // 灰色按钮hover字色
 $--button-gray-active-color: mix(#000, $--color-primary, 15%); // 灰色按钮focus字色
-$--button-gray-background-color: $--background-color-base; // 灰色按钮背景色
+$--button-gray-background-color: $--background-color-empty; // 灰色按钮背景色
 $--button-gray-hover-background-color: $--background-color-base; // 灰色按钮hover背景色
 $--button-gray-active-background-color: $--background-color-base; // 灰色按钮focus背景色
 $--button-gray-border-color: #454545; // 灰色按钮边框色
 $--button-gray-hover-border-color: $--button-gray-hover-color; // 灰色按钮hover边框色
 $--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色
 
-$--button-light-gray-color: $--color-text-secondary; // 灰色按钮字色
-$--button-light-gray-hover-color: $--button-gray-hover-color; // 灰色按钮hover字色
-$--button-light-gray-active-color: $--button-gray-active-color; // 灰色按钮focus字色
-$--button-light-gray-background-color: $--background-color-empty; // 灰色按钮背景色
-$--button-light-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色
-$--button-light-gray-active-background-color: $--background-color-empty; // 灰色按钮focus背景色
-$--button-light-gray-border-color: #454545; // 灰色按钮边框色
-$--button-light-gray-hover-border-color: $--button-gray-hover-border-color; // 灰色按钮hover边框色
-$--button-light-gray-active-border-color: $--button-gray-active-border-color; // 灰色按钮focus边框色
+// button-icon用于单图标按钮
+$--button-icon-color: $--color-text-regular; // 字色
+$--button-icon-hover-color: $--color-text-primary; // hover字色
+$--button-icon-active-color: $--color-text-primary; // focus字色
+$--button-icon-background-color: $--background-color-base; // 背景色
+$--button-icon-hover-background-color: $--background-color-empty; // hover背景色
+$--button-icon-active-background-color: $--background-color-empty; // focus背景色
+$--button-icon-border-color: #454545; // 边框色
+$--button-icon-hover-border-color: $--button-icon-border-color; // hover边框色
+$--button-icon-active-border-color: $--color-text-primary; // focus边框色
 
 
 
diff --git a/nezha-fronted/src/assets/css/themes/theme-light.scss b/nezha-fronted/src/assets/css/themes/theme-light.scss
index e031ba514..f68977b34 100644
--- a/nezha-fronted/src/assets/css/themes/theme-light.scss
+++ b/nezha-fronted/src/assets/css/themes/theme-light.scss
@@ -10,6 +10,8 @@ $--background-color-empty: #FFFFFE;
 $--background-color-base: #F6F6F6;
 // 背景色1
 $--background-color-1: #EFEFEF;
+// 背景色2
+$--background-color-2: #F9F9F9;
 
 // 左侧菜单背景色
 $--left-menu-background-color-base: #202F3F;
@@ -86,13 +88,13 @@ $--dropdown-menu-box-shadow-color: rgba(0, 0, 0, 0.1);
 $--input-background-color: $--background-color-empty;
 
 /* 12.按钮 */
+// button-primary用于橙色按钮
 $--button-primary-color: #FFFFFE; // 普通按钮字色
 $--button-primary-background-color: $--color-primary; // 普通按钮背景色
 $--button-primary-hover-background-color: mix(#FFF, $--color-primary, 10%);
 $--button-primary-active-background-color: mix(#000, $--color-primary, 10%);
 
-// 黑暗模式下，灰按钮有两种色值，明亮模式下只有一种；为了区分黑暗模式的两种按钮，此处设button-gray和button-light-gray两种前缀，颜色一深一浅，明亮模式下这两种的色值是一样的；
-// button-gray用于普通列表顶部的按钮，button-light-gray用户dashboard、panel顶部按钮
+// button-gray用于普通按钮
 $--button-gray-color: $--color-text-regular; // 灰色按钮字色
 $--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
 $--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
@@ -103,15 +105,16 @@ $--button-gray-border-color: $--border-color-base; // 灰色按钮边框色
 $--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
 $--button-gray-active-border-color: $--button-gray-active-color; // 灰色按钮focus边框色
 
-$--button-light-gray-color: $--color-text-regular; // 灰色按钮字色
-$--button-light-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
-$--button-light-gray-active-color: $--color-primary; // 灰色按钮focus字色
-$--button-light-gray-background-color: $--background-color-base; // 灰色按钮背景色
-$--button-light-gray-hover-background-color: $--background-color-empty; // 灰色按钮hover背景色
-$--button-light-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
-$--button-light-gray-border-color: $--border-color-base; // 灰色按钮边框色
-$--button-light-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
-$--button-light-gray-active-border-color: $--button-gray-border-color; // 灰色按钮focus边框色
+// button-icon用于单图标按钮
+$--button-icon-color: $--color-text-regular; // 字色
+$--button-icon-hover-color: $--button-icon-color; // hover字色
+$--button-icon-active-color: $--color-primary; // focus字色
+$--button-icon-background-color: $--background-color-2; // 背景色
+$--button-icon-hover-background-color: $--background-color-empty; // hover背景色
+$--button-icon-active-background-color: $--background-color-empty; // focus背景色
+$--button-icon-border-color: $--border-color-base; // 边框色
+$--button-icon-hover-border-color: $--border-color-base; // hover边框色
+$--button-icon-active-border-color: mix(#FFF, $--color-primary, 10%); // focus边框色
 
 
 /*** themes/common.scss是与主题切换无关的变量 ***/
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index 2cae7a7ec..aae8ac4a4 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -4,11 +4,11 @@
     <multipleTime v-if="showMultiple" ref="multipleTime" :stepSearchTime="searchTime" class="multiple-time margin-r-10" @change="dateChange(searchTime)"/>
     <chart-unit v-if="useChartUnit" v-model="unit" class="margin-r-10"></chart-unit>
     <div v-show="useRefresh" class="top-tool-btn-group">
-      <button :id="id+'-refresh'" :class="{'top-tool-btn--light-gray': btnTheme === 'light-gray'}" class="top-tool-btn top-tool-btn--text" @click="antiShake">
+      <button :id="id+'-refresh'" class="top-tool-btn top-tool-btn--text" @click="antiShake">
         <i class="global-active-color nz-icon nz-icon-refresh" style="font-size: 14px"></i>&nbsp;
         <span><slot name="added-text"></slot></span>
       </button>
-      <button id="browser-go" :class="{'top-tool-btn--light-gray': btnTheme === 'light-gray'}" class="top-tool-btn top-tool-btn--dropdown" @click="dropdownHandler(dropdownShow)">
+      <button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @click="dropdownHandler(dropdownShow)">
         <span class="select-refresh-time-label" v-if="interval !== -1">{{interLabel}}</span>
         <i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
         <transition name="el-zoom-in-top">
@@ -66,8 +66,7 @@ export default {
     },
     defaultPick: Number,
     showEmpty: { type: Boolean, default: false },
-    id: String,
-    btnTheme: String
+    id: String
   },
   data () {
     return {
diff --git a/nezha-fronted/src/components/page/dashboard/overview/overview.vue b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
index 9e76a9196..d0a6cc1c2 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/overview.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview.vue
@@ -13,7 +13,7 @@
             <div class="week">{{sysWeek}}</div>
             <div class="sys-date">{{sysDate}}</div>
           </div>
-          <pick-time id="overview-search" ref="pickTime" v-model="searchTime" :refresh-data-func="setFreshDataTimer" :showTimePicker="false" :use-chart-unit="false" btn-theme="light-gray" class="float-right pickTime margin-l-5"></pick-time>
+          <pick-time id="overview-search" ref="pickTime" v-model="searchTime" :refresh-data-func="setFreshDataTimer" :showTimePicker="false" :use-chart-unit="false" class="float-right pickTime margin-l-5"></pick-time>
           <div id="overview-full-screen" class="operation" @click="switchFullScreen"><span ><i :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}" class="nz-icon screen-icon"></i></span></div>
         </div>
       </div>