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}