diff --git a/html/src/app.dark.scss b/html/src/app.dark.scss
index 1f444996..b0ec2590 100644
--- a/html/src/app.dark.scss
+++ b/html/src/app.dark.scss
@@ -177,6 +177,18 @@ button {
     background: #202020;
 }
 
+.el-menu-item {
+    color: #f8f8f8;
+}
+
+.el-menu-item.notify::after {
+    background: #ebeef5;
+}
+
+.el-menu-item.is-active::before {
+    background: #dcdfe6;
+}
+
 .el-menu-item:focus,
 .el-menu-item:hover {
     background-color: #505050;
@@ -365,3 +377,7 @@ button {
 .x-login-container p {
     color: #ddd;
 }
+
+.x-menu-container {
+    background: #303133;
+}
diff --git a/html/src/app.scss b/html/src/app.scss
index 70975cf6..2281690c 100644
--- a/html/src/app.scss
+++ b/html/src/app.scss
@@ -184,7 +184,7 @@ a {
 .x-menu-container {
     flex: none;
     overflow: hidden auto;
-    background: #383838;
+    background: #f8f8f8;
 }
 
 .x-menu-container > .el-menu {
@@ -192,6 +192,10 @@ a {
     border: 0;
 }
 
+.el-menu-item {
+    color: #303133;
+}
+
 .el-menu-item.is-active::before {
     position: absolute;
     top: 4px;
@@ -199,7 +203,7 @@ a {
     width: 2px;
     height: 48px;
     content: '';
-    background: #dcdfe6;
+    background: #303133;
 }
 
 .el-menu-item.notify::after {
@@ -209,7 +213,7 @@ a {
     width: 4px;
     height: 4px;
     content: '';
-    background: #ebeef5;
+    background: #303133;
     border-radius: 50%;
 }