diff --git a/frontend/src/components/dataease/DeAsideContainer.vue b/frontend/src/components/dataease/DeAsideContainer.vue
index 765a8cbab2..32a90322fd 100644
--- a/frontend/src/components/dataease/DeAsideContainer.vue
+++ b/frontend/src/components/dataease/DeAsideContainer.vue
@@ -43,7 +43,7 @@ export default {
     padding: 10px;
     border-radius: 2px;
     box-sizing: border-box;
-    background-color: var(--SiderBG);
+    background-color: var(--SiderBG, #FFF);
     height: calc(100vh - 56px);
     border-right: 0px;
     position: relative;
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index 38ec468d53..07b4da208d 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -8,7 +8,7 @@
       class="de-top-menu"
       mode="horizontal"
       :style="{'margin-left': '260px', 'position': 'absolute'}"
-      active-text-color="#409EFF"
+      active-text-color="#FFFFFF"
       :default-active="activeMenu"
       @select="handleSelect"
     >
diff --git a/frontend/src/styles/sidebar.scss b/frontend/src/styles/sidebar.scss
index 8d4b11e22c..2092fe4bde 100644
--- a/frontend/src/styles/sidebar.scss
+++ b/frontend/src/styles/sidebar.scss
@@ -69,9 +69,9 @@
     
 
     .submenu-title-noDropdown:not(.is-active), .el-submenu__title {
-      color: var(--SiderTextColor);
+      color: var(--SiderTextColor, #1e212a);
       &:hover {
-        background-color: var(--MenuHovorBG, #ecf5ff) !important;
+        background-color: var(--MenuHovorBG, rgba(158,158,158,.2)) !important;
         color: var(--TextActive, #409EFF);
       }
       &:focus {
@@ -97,7 +97,7 @@
       background-color: var(--SiderBG) !important;
       color: var(--SiderTextColor);
       &:hover {
-        background-color: var(--MenuHovorBG, #ecf5ff) !important;
+        background-color: var(--MenuHovorBG, rgba(158,158,158,.2)) !important;
         color: var(--TextActive) !important;
       }
     }
diff --git a/frontend/src/styles/topbar.scss b/frontend/src/styles/topbar.scss
index aeafa7287f..964fd870ac 100644
--- a/frontend/src/styles/topbar.scss
+++ b/frontend/src/styles/topbar.scss
@@ -6,7 +6,7 @@
   z-index: 1001;
   overflow: hidden;
   border-bottom: 1px solid var(--TopBG, #E6E6E6);
-  background-color: var(--TopBG, #ffffff); 
+  background-color: var(--TopBG, #f1f3f8); 
   .log {
     padding: 0 16px;
     line-height: 56px;
@@ -25,27 +25,28 @@
   .el-menu {
     float: left;
     border: none !important;
-    background-color: var(--TopBG, #ffffff) !important;
+    background-color: var(--TopBG, #f1f3f8) !important;
     .nav-item {
       display: inline-block;
 
       .el-menu-item:not(.is-active) {
-        color: var(--TopTextColor);
+        color: var(--TopTextColor, #1e212a);
         opacity: 0.65;
         &:hover {
-          background-color: var(--MenuHovorBG, #ecf5ff) !important;
+          background-color: var(--MenuHovorBG, rgba(158,158,158,.2)) !important;
           opacity: 1;
         }
 
         &:focus {
-          background-color: var(--MenuActiveBG, #ecf5ff) !important;
+          background-color: var(--MenuActiveBG, $--color-primary) !important;
           opacity: 1;
+          color: var(--TopTextColor, #f4f4f5);
         }
 
       }
       .el-menu-item.is-active {
-        background-color: var(--MenuActiveBG, #ecf5ff) ;
-        color: var(--TextActive) !important;
+        background-color: var(--MenuActiveBG, $--color-primary) ;
+        color: var(--TextActive, #f4f4f5) !important;
         opacity: 1;
       }