diff --git a/web/src/components/layout/SiderBar.jsx b/web/src/components/layout/SiderBar.jsx
index 39d6d4489..096ea08cc 100644
--- a/web/src/components/layout/SiderBar.jsx
+++ b/web/src/components/layout/SiderBar.jsx
@@ -377,7 +377,6 @@ const SiderBar = ({ onNavigate = () => {} }) => {
       className='sidebar-container'
       style={{
         width: 'var(--sidebar-current-width)',
-        background: 'var(--semi-color-bg-0)',
       }}
     >
       <SkeletonWrapper
diff --git a/web/src/index.css b/web/src/index.css
index 251bf79c6..dff5360b9 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -108,6 +108,7 @@ code {
   display: flex;
   flex-direction: column;
   transition: width 0.3s ease;
+  background: var(--semi-color-bg-0);
 }
 
 .sidebar-nav {
@@ -221,6 +222,22 @@ code {
   padding-top: 12px;
 }
 
+@media (max-width: 767px) {
+  .sidebar-container {
+    background: var(--semi-color-bg-1);
+    border-right: 1px solid var(--semi-color-border);
+  }
+
+  .sidebar-nav {
+    background: var(--semi-color-bg-1);
+  }
+
+  .sidebar-collapse-button {
+    background-color: var(--semi-color-bg-1);
+    box-shadow: 0 -10px 10px -5px var(--semi-color-bg-1);
+  }
+}
+
 /* ==================== 聊天界面样式 ==================== */
 .semi-chat {
   padding-top: 0 !important;