fix: color of canvas element under embed dark theme whiteboard is wrong

toeverything · Nov 5, 2024 · 83da91a · 83da91a
1 parent 91f70f9
commit 83da91a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 11 deletions.
diff --git a/packages/affine/shared/src/services/theme-service.ts b/packages/affine/shared/src/services/theme-service.ts
@@ -14,7 +14,7 @@ import {
 } from '@toeverything/theme';
 import { unsafeCSS } from 'lit';
 
-import { DocModeProvider, type DocModeService } from './doc-mode-service.js';
+import { isInsideEdgelessEditor } from '../utils/index.js';
 
 const TRANSPARENT = 'transparent';
 
@@ -53,19 +53,16 @@ export class ThemeService extends Extension {
   }
 
   get theme() {
-    return this.docMode.getEditorMode() === 'page'
-      ? this.appTheme
-      : this.edgelessTheme;
+    return isInsideEdgelessEditor(this.std.host)
+      ? this.edgelessTheme
+      : this.appTheme;
   }
 
   get theme$() {
-    return this.docMode.getEditorMode() === 'page' ? this.app$ : this.edgeless$;
+    return isInsideEdgelessEditor(this.std.host) ? this.edgeless$ : this.app$;
   }
 
-  constructor(
-    private std: BlockStdScope,
-    private docMode: DocModeService
-  ) {
+  constructor(private std: BlockStdScope) {
     super();
     const extension = this.std.getOptional(ThemeExtensionIdentifier);
     this.app$ = extension?.getAppTheme?.() || getThemeObserver().theme$;
@@ -74,7 +71,7 @@ export class ThemeService extends Extension {
   }
 
   static override setup(di: Container) {
-    di.addImpl(ThemeProvider, ThemeService, [StdIdentifier, DocModeProvider]);
+    di.addImpl(ThemeProvider, ThemeService, [StdIdentifier]);
   }
 
   /**

diff --git a/packages/affine/shared/src/utils/dom/checker.ts b/packages/affine/shared/src/utils/dom/checker.ts
@@ -8,6 +8,8 @@ export function isInsidePageEditor(host: EditorHost) {
 
 export function isInsideEdgelessEditor(host: EditorHost) {
   return Array.from(host.children).some(
-    v => v.tagName.toLowerCase() === 'affine-edgeless-root'
+    v =>
+      v.tagName.toLowerCase() === 'affine-edgeless-root' ||
+      v.tagName.toLowerCase() === 'affine-edgeless-root-preview'
   );
 }
diff --git a/packages/playground/apps/default/utils/editor.ts b/packages/playground/apps/default/utils/editor.ts
@@ -11,6 +11,7 @@ import {
   ParseDocUrlExtension,
   RefNodeSlotsExtension,
   RefNodeSlotsProvider,
+  SpecProvider,
 } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import { AffineEditorContainer } from '@blocksuite/presets';
@@ -131,6 +132,10 @@ export async function mountDefaultDocEditor(collection: DocCollection) {
       mockPeekViewExtension(attachmentViewerPanel),
     ];
 
+    SpecProvider.getInstance().extendSpec('edgeless:preview', [
+      OverrideThemeExtension(themeExtension),
+    ]);
+
     return newSpec;
   }
 }
diff --git a/packages/playground/apps/starter/utils/editor.ts b/packages/playground/apps/starter/utils/editor.ts
@@ -110,6 +110,10 @@ export async function mountDefaultDocEditor(collection: DocCollection) {
   pageSpecs.extend([...extensions]);
   editor.pageSpecs = pageSpecs.value;
 
+  SpecProvider.getInstance().extendSpec('edgeless:preview', [
+    OverrideThemeExtension(themeExtension),
+  ]);
+
   const edgelessSpecs = SpecProvider.getInstance().getSpec('edgeless');
   edgelessSpecs.extend([...extensions]);
   editor.edgelessSpecs = edgelessSpecs.value;