diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index 0c0f05a2..8740b791 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -256,4 +256,14 @@
 .ant-card-dark .ant-calendar-last-month-cell .ant-calendar-date,
 .ant-card-dark .ant-calendar-next-month-btn-day .ant-calendar-date {
     color: hsla(0,0%,100%,.30);
+}
+
+.ant-drawer-dark {
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-drawer-dark .ant-drawer-wrapper-body,
+.ant-drawer-dark .drawer-handle {
+    background-color: #001529;
+    border: 1px solid hsla(0,0%,100%,.30);
 }
\ No newline at end of file
diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
index e9a30b71..608ca20e 100644
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -51,11 +51,12 @@
 <a-drawer id="sider-drawer" placement="left" :closable="false"
           @close="siderDrawer.close()"
           :visible="siderDrawer.visible"
+          :wrap-class-name="siderDrawer.isDarkTheme ? 'ant-drawer-dark' : ''"
           :wrap-style="{ padding: 0 }">
     <div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
         <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
     </div>
-    <a-menu mode="inline" selected-keys="">
+    <a-menu :theme="siderDrawer.theme" mode="inline" selected-keys="">
         <a-menu-item mode="inline">
             <a-icon type="bg-colors"></a-icon>
             <a-switch :default-checked="siderDrawer.isDarkTheme"
@@ -64,7 +65,7 @@
             @change="siderDrawer.changeTheme()"></a-switch>
         </a-menu-item>
     </a-menu>
-    <a-menu mode="inline" :selected-keys="['{{ .request_uri }}']"
+    <a-menu :theme="siderDrawer.theme" mode="inline" :selected-keys="['{{ .request_uri }}']"
         @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
         {{template "menuItems" .}}
     </a-menu>