diff --git a/frontend/src/components/Notification/index.vue b/frontend/src/components/Notification/index.vue
index aad83b84da..c0a4675f2d 100644
--- a/frontend/src/components/Notification/index.vue
+++ b/frontend/src/components/Notification/index.vue
@@ -234,7 +234,7 @@ export default {
     right: 178px;
     top: 8px;
     background: red;
-    color: var(--TextActive);
+    color: var(--TextActive, #fff);
     border-radius: 17px;
     padding: 4px 7px;
     font-size: 16px;
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 486ee5df21..b368277b04 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -633,5 +633,38 @@ div:focus {
     background: #38393a !important;
 }
 
+.blackTheme .el-message-box__content {
+    color:#F2F6FC;
+}
+
+.blackTheme .el-message-box__btns {
+    .el-button--default:not(.el-button--primary) {
+        background-color: #171b22 ;
+        color: #2681ff;
+    }
+    .el-button--primary {
+        color: #21333b;
+        background-color: #2681ff;
+        border-color: #2681ff;
+    }
+}
+
+.blackTheme .vue-treeselect__menu {
+    border: 1px solid var(--TableBorderColor, #cfcfcf);
+    background: var(--MainBG, #fff);
+}
+
+.blackTheme .vue-treeselect__option:not(.vue-treeselect__option--highlight) {
+    color: #606266;
+}
+.blackTheme .vue-treeselect__option--highlight {
+    color: #2681ff;
+    background-color: #000000;
+}
+
+.blackTheme .el-table__body tr.current-row > td {
+    background-color: #324f62;
+}
+
 
 
diff --git a/frontend/src/views/panel/GrantAuth/index.vue b/frontend/src/views/panel/GrantAuth/index.vue
index 8f7cb7f6c3..f7d1132ca1 100644
--- a/frontend/src/views/panel/GrantAuth/index.vue
+++ b/frontend/src/views/panel/GrantAuth/index.vue
@@ -2,7 +2,7 @@
   <div>
     <el-button v-show="!showSearchInput" class="de-icon" icon="el-icon-search" circle size="mini" @click="showSearchWidget" />
     <div v-show="showSearchInput" class="de-input">
-      <el-input v-model="key">
+      <el-input v-model="key" class="main-area-input">
         <el-button slot="append" icon="el-icon-close" @click="closeSearchWidget" />
       </el-input>
     </div>
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index 779370a044..27d429b3c1 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -166,7 +166,8 @@
                       group="dimension"
                       animation="300"
                       :move="onMove"
-                      style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;background-color: white;"
+                      class="theme-drag"
+                      style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
                       @end="end2"
                     >
                       <transition-group class="list-group" :data-value="$t('panel.drag_here')">
@@ -715,7 +716,7 @@ export default {
             padding: 8px;
             height: 100%;
             border-right: none;
-            border: 1px solid #E6E6E6;
+            border: 1px solid var(--TableBorderColor, #E6E6E6);;
             .field-content-text {
                 box-sizing: border-box;
                 overflow: hidden;
@@ -727,7 +728,7 @@ export default {
         .field-content-right {
             border-left: none;
             color: #9ea6b2;
-            border: 1px solid #E6E6E6;
+            border: 1px solid var(--TableBorderColor, #E6E6E6);
             width: 0%;
             max-width: 0%;
             position: relative;
@@ -764,7 +765,7 @@ export default {
   }
 
   .filter-dialog-tabs {
-      border: 1px solid #E6E6E6;
+      border: 1px solid var(--TableBorderColor, #E6E6E6);
       padding: 10px;
       height: 100%;
       >>> div.el-tabs__content {
@@ -867,4 +868,8 @@ export default {
     content: attr(data-value);
   }
 
+  .blackTheme .theme-drag {
+      background-color: var(--MainBG, #fff);
+  }
+
 </style>