diff --git a/web/src/components/layout/SiderBar.jsx b/web/src/components/layout/SiderBar.jsx
index 1b6fc692..096ea08c 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-1)',
       }}
     >
       <SkeletonWrapper
diff --git a/web/src/index.css b/web/src/index.css
index 8f0ae91d..dff5360b 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -108,14 +108,13 @@ code {
   display: flex;
   flex-direction: column;
   transition: width 0.3s ease;
-  background: var(--semi-color-bg-1);
-  border-right: 1px solid var(--semi-color-border);
+  background: var(--semi-color-bg-0);
 }
 
 .sidebar-nav {
   flex: 1;
   width: 100%;
-  background: var(--semi-color-bg-1);
+  background: var(--semi-color-bg-0);
   height: 100%;
   overflow: hidden;
   border-right: none;
@@ -193,11 +192,11 @@ code {
   padding: 12px;
   margin-top: auto;
   cursor: pointer;
-  background-color: var(--semi-color-bg-1);
+  background-color: var(--semi-color-bg-0);
   position: sticky;
   bottom: 0;
   z-index: 10;
-  box-shadow: 0 -10px 10px -5px var(--semi-color-bg-1);
+  box-shadow: 0 -10px 10px -5px var(--semi-color-bg-0);
   backdrop-filter: blur(4px);
   border-top: 1px solid rgba(var(--semi-grey-0), 0.08);
 }
@@ -223,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;