fix(core): bg color issues in transparent mode (#5278)

fix the following style issue
![CleanShot 2023-12-13 at 00.06.13@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/46f5e766-e6c9-4965-bab7-6fd6dbb2c651.png)

packages/frontend/component/src/components/workspace/index.css.ts

@@ -54,6 +54,7 @@ export const mainContainerStyle = style({
   width: 0,
   flex: 1,
   maxWidth: '100%',
+  backgroundColor: 'var(--affine-background-primary-color)',
   selectors: {
     '&[data-show-padding="true"]': {
       margin: '8px',
@@ -79,6 +80,9 @@ export const mainContainerStyle = style({
       left: 0,
       WebkitAppRegion: 'drag',
     },
+    '&[data-transparent=true]': {
+      backgroundColor: 'transparent',
+    },
   },
 } as ComplexStyleRule);
 

packages/frontend/component/src/components/workspace/index.tsx

@@ -35,13 +35,14 @@ export const AppContainer = ({
 export interface MainContainerProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
   padding?: boolean;
+  transparent?: boolean;
 }
 
 export const MainContainer = forwardRef<
   HTMLDivElement,
   PropsWithChildren<MainContainerProps>
 >(function MainContainer(
-  { className, padding, children, ...props },
+  { className, padding, children, transparent, ...props },
   ref
 ): ReactElement {
   return (
@@ -50,6 +51,7 @@ export const MainContainer = forwardRef<
       className={clsx(mainContainerStyle, className)}
       data-is-macos={environment.isDesktop && environment.isMacOs}
       data-show-padding={!!padding}
+      data-transparent={transparent}
       ref={ref}
     >
       {children}

packages/frontend/core/src/layouts/workspace-layout.tsx

@@ -219,6 +219,10 @@ export const WorkspaceLayoutInner = ({
 
   const { appSettings } = useAppSettingHelper();
   const location = useLocation();
+  const { pageId } = useParams();
+
+  // todo: refactor this that the root layout do not need to check route state
+  const isInPageDetail = !!pageId;
 
   return (
     <>
@@ -247,15 +251,18 @@ export const WorkspaceLayoutInner = ({
               paths={pathGenerator}
             />
           </Suspense>
-          <Suspense fallback={<MainContainer />}>
+          <MainContainer
-            <MainContainer padding={appSettings.clientBorder}>
+            transparent={isInPageDetail}
+            padding={appSettings.clientBorder}
+          >
+            <Suspense>
               {migration ? (
                 <WorkspaceUpgrade migration={migration} />
               ) : (
                 children
               )}
-            </MainContainer>
+            </Suspense>
-          </Suspense>
+          </MainContainer>
         </AppContainer>
         <PageListTitleCellDragOverlay />
       </DndContext>