refactor(core): set edgeless theme on doc created (#8670)

packages/frontend/core/src/modules/index.ts

@@ -26,6 +26,7 @@ import { configureShareSettingModule } from './share-setting';
 import { configureSystemFontFamilyModule } from './system-font-family';
 import { configureTagModule } from './tag';
 import { configureTelemetryModule } from './telemetry';
+import { configureAppThemeModule } from './theme';
 import { configureThemeEditorModule } from './theme-editor';
 import { configureUrlModule } from './url';
 import { configureUserspaceModule } from './userspace';
@@ -61,4 +62,5 @@ export function configureCommonModules(framework: Framework) {
   configureAppSidebarModule(framework);
   configureJournalModule(framework);
   configureUrlModule(framework);
+  configureAppThemeModule(framework);
 }

packages/frontend/core/src/modules/theme/entities/theme.ts

@@ -0,0 +1,5 @@
+import { Entity, LiveData } from '@toeverything/infra';
+
+export class AppTheme extends Entity {
+  theme$ = new LiveData<string | undefined>(undefined);
+}

packages/frontend/core/src/modules/theme/index.ts

@@ -0,0 +1,16 @@
+export { AppThemeService } from './services/theme';
+
+import { type Framework, WorkspaceScope } from '@toeverything/infra';
+
+import { EditorSettingService } from '../editor-setting';
+import { AppTheme } from './entities/theme';
+import { EdgelessThemeService } from './services/edgeless-theme';
+import { AppThemeService } from './services/theme';
+
+export function configureAppThemeModule(framework: Framework) {
+  framework
+    .service(AppThemeService)
+    .entity(AppTheme)
+    .scope(WorkspaceScope)
+    .service(EdgelessThemeService, [AppThemeService, EditorSettingService]);
+}

packages/frontend/core/src/modules/theme/services/edgeless-theme.ts

@@ -0,0 +1,42 @@
+import type { DocRecord } from '@toeverything/infra';
+import { DocCreated, OnEvent, Service } from '@toeverything/infra';
+
+import type { EditorSettingService } from '../../editor-setting';
+import type { EdgelessDefaultTheme } from '../../editor-setting/schema';
+import type { AppThemeService } from './theme';
+
+const getValueByDefaultTheme = (
+  defaultTheme: EdgelessDefaultTheme,
+  currentAppTheme: string
+) => {
+  switch (defaultTheme) {
+    case 'dark':
+      return 'dark';
+    case 'light':
+      return 'light';
+    case 'specified':
+      return currentAppTheme === 'dark' ? 'dark' : 'light';
+    case 'auto':
+      return 'system';
+    default:
+      return 'system';
+  }
+};
+
+@OnEvent(DocCreated, i => i.onDocCreated)
+export class EdgelessThemeService extends Service {
+  constructor(
+    private readonly appThemeService: AppThemeService,
+    private readonly editorSettingService: EditorSettingService
+  ) {
+    super();
+  }
+
+  onDocCreated(docRecord: DocRecord) {
+    const value = getValueByDefaultTheme(
+      this.editorSettingService.editorSetting.get('edgelessDefaultTheme'),
+      this.appThemeService.appTheme.theme$.value ?? 'light'
+    );
+    docRecord.setProperty('edgelessColorTheme', value);
+  }
+}

packages/frontend/core/src/modules/theme/services/theme.ts

@@ -0,0 +1,7 @@
+import { Service } from '@toeverything/infra';
+
+import { AppTheme } from '../entities/theme';
+
+export class AppThemeService extends Service {
+  appTheme = this.framework.createEntity(AppTheme);
+}