diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts
index 76b79e7161..802282326c 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.css.ts
@@ -15,6 +15,7 @@ export const mainContainer = style({
   flexDirection: 'column',
   minWidth: 0,
   overflow: 'hidden',
+  background: 'var(--affine-background-primary-color)',
   selectors: {
     [`${root}[data-client-border=true] &`]: {
       borderRadius: '4px',
@@ -47,6 +48,7 @@ export const sidebarContainer = style({
 
 export const sidebarContainerInner = style({
   display: 'flex',
+  background: 'var(--affine-background-primary-color)',
   flexDirection: 'column',
   overflow: 'hidden',
   height: '100%',