refactor(editor): fix edgeless toolbar theme (#10897)

blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts

@@ -1,7 +1,11 @@
 import { DatabaseSelection } from '@blocksuite/affine-block-database';
 import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import { TableSelection } from '@blocksuite/affine-block-table';
-import { EditorToolbar } from '@blocksuite/affine-components/toolbar';
+import {
+  darkToolbarStyles,
+  EditorToolbar,
+  lightToolbarStyles,
+} from '@blocksuite/affine-components/toolbar';
 import {
   CodeBlockModel,
   ImageBlockModel,
@@ -34,7 +38,7 @@ import {
 import { nextTick } from '@blocksuite/global/utils';
 import type { Placement, ReferenceElement, SideObject } from '@floating-ui/dom';
 import { batch, effect, signal } from '@preact/signals-core';
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
 import groupBy from 'lodash-es/groupBy';
 import throttle from 'lodash-es/throttle';
 import toPairs from 'lodash-es/toPairs';
@@ -71,6 +75,13 @@ export class AffineToolbarWidget extends WidgetComponent {
         opacity: 0;
       }
     }
+
+    editor-toolbar[data-app-theme='dark'] {
+      ${unsafeCSS(darkToolbarStyles.join('\n'))}
+    }
+    editor-toolbar[data-app-theme='light'] {
+      ${unsafeCSS(lightToolbarStyles.join('\n'))}
+    }
   `;
 
   placement$ = signal<Placement>('top');
@@ -564,6 +575,13 @@ export class AffineToolbarWidget extends WidgetComponent {
       })
     );
 
+    // Updates toolbar theme when `app-theme` changing
+    disposables.add(
+      context.theme.app$.subscribe(theme => {
+        toolbar.dataset.appTheme = theme;
+      })
+    );
+
     disposables.add(
       effect(() => {
         const value = flags.value$.value;