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

2026-02-15 21:41:52 +08:00 · 2025-03-20 02:08:20 +00:00
parent ccc210f88a
commit a7acd5c5b1
9 changed files with 54 additions and 63 deletions
--- a/blocksuite/affine/blocks/block-note/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-note/src/configs/toolbar.ts
@@ -15,7 +15,6 @@ import {
  resolveColor,
 } from '@blocksuite/affine-model';
 import {
-  FeatureFlagService,
  NotificationProvider,
  SidebarExtensionIdentifier,
  type ToolbarAction,
@@ -64,9 +63,7 @@ const builtinSurfaceToolbarConfig = {
      when(ctx) {
        return (
          ctx.getSurfaceModelsByType(NoteBlockModel).length === 1 &&
-          ctx.std
-            .get(FeatureFlagService)
-            .getFlag('enable_advanced_block_visibility')
+          ctx.features.getFlag('enable_advanced_block_visibility')
        );
      },
      content(ctx) {
@@ -98,9 +95,7 @@ const builtinSurfaceToolbarConfig = {
        return (
          elements.length === 1 &&
          !elements[0].isPageBlock() &&
-          !ctx.std
-            .get(FeatureFlagService)
-            .getFlag('enable_advanced_block_visibility')
+          !ctx.features.getFlag('enable_advanced_block_visibility')
        );
      },
      generate(ctx) {
@@ -153,10 +148,8 @@ const builtinSurfaceToolbarConfig = {
        const models = ctx.getSurfaceModelsByType(NoteBlockModel);
        if (!models.length) return null;

-        const enableCustomColor = ctx.std
-          .get(FeatureFlagService)
-          .getFlag('enable_color_picker');
-        const theme = ctx.themeProvider.edgelessTheme;
+        const enableCustomColor = ctx.features.getFlag('enable_color_picker');
+        const theme = ctx.theme.edgeless$.value;

        const firstModel = models[0];
        const background =
@@ -216,7 +209,7 @@ const builtinSurfaceToolbarConfig = {
            const models = ctx.getSurfaceModelsByType(NoteBlockModel);
            if (!models.length) return null;

-            const theme = ctx.themeProvider.edgelessTheme;
+            const theme = ctx.theme.edgeless$.value;

            const firstModel = models[0];
            const { shadowType } = firstModel.props.edgeless.style;
@@ -367,9 +360,7 @@ const builtinSurfaceToolbarConfig = {
      when(ctx) {
        return (
          ctx.getSurfaceModelsByType(NoteBlockModel).length === 1 &&
-          ctx.std
-            .get(FeatureFlagService)
-            .getFlag('enable_advanced_block_visibility')
+          ctx.features.getFlag('enable_advanced_block_visibility')
        );
      },
      run(ctx) {
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts
@@ -9,10 +9,7 @@ import {
  LineWidth,
  resolveColor,
 } from '@blocksuite/affine-model';
-import {
-  FeatureFlagService,
-  type ToolbarModuleConfig,
-} from '@blocksuite/affine-shared/services';
+import { type ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
 import {
  getMostCommonResolvedValue,
  getMostCommonValue,
@@ -58,10 +55,8 @@ export const builtinBrushToolbarConfig = {
        const models = ctx.getSurfaceModelsByType(BrushElementModel);
        if (!models.length) return null;

-        const enableCustomColor = ctx.std
-          .get(FeatureFlagService)
-          .getFlag('enable_color_picker');
-        const theme = ctx.themeProvider.edgelessTheme;
+        const enableCustomColor = ctx.features.getFlag('enable_color_picker');
+        const theme = ctx.theme.edgeless$.value;

        const field = 'color';
        const firstModel = models[0];
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts
@@ -21,11 +21,10 @@ import {
  resolveColor,
  StrokeStyle,
 } from '@blocksuite/affine-model';
-import {
-  FeatureFlagService,
-  type ToolbarContext,
-  type ToolbarGenericAction,
-  type ToolbarModuleConfig,
+import type {
+  ToolbarContext,
+  ToolbarGenericAction,
+  ToolbarModuleConfig,
 } from '@blocksuite/affine-shared/services';
 import {
  getMostCommonResolvedValue,
@@ -129,10 +128,8 @@ export const builtinConnectorToolbarConfig = {
        const models = ctx.getSurfaceModelsByType(ConnectorElementModel);
        if (!models.length) return null;

-        const enableCustomColor = ctx.std
-          .get(FeatureFlagService)
-          .getFlag('enable_color_picker');
-        const theme = ctx.themeProvider.edgelessTheme;
+        const enableCustomColor = ctx.features.getFlag('enable_color_picker');
+        const theme = ctx.theme.edgeless$.value;

        const field = 'stroke';
        const firstModel = models[0];
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/frame.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/frame.ts
@@ -16,7 +16,6 @@ import {
  SurfaceRefBlockSchema,
 } from '@blocksuite/affine-model';
 import {
-  FeatureFlagService,
  type ToolbarModuleConfig,
  ToolbarModuleExtension,
 } from '@blocksuite/affine-shared/services';
@@ -125,10 +124,8 @@ const builtinSurfaceToolbarConfig = {
        const models = ctx.getSurfaceModelsByType(FrameBlockModel);
        if (!models.length) return null;

-        const theme = ctx.themeProvider.edgelessTheme;
-        const enableCustomColor = ctx.std
-          .get(FeatureFlagService)
-          .getFlag('enable_color_picker');
+        const enableCustomColor = ctx.features.getFlag('enable_color_picker');
+        const theme = ctx.theme.edgeless$.value;

        const field = 'background';
        const firstModel = models[0];
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts
@@ -24,10 +24,9 @@ import {
  ShapeType,
  StrokeStyle,
 } from '@blocksuite/affine-model';
-import {
-  FeatureFlagService,
-  type ToolbarGenericAction,
-  type ToolbarModuleConfig,
+import type {
+  ToolbarGenericAction,
+  ToolbarModuleConfig,
 } from '@blocksuite/affine-shared/services';
 import { getMostCommonValue } from '@blocksuite/affine-shared/utils';
 import { Bound } from '@blocksuite/global/gfx';
@@ -184,10 +183,8 @@ export const builtinShapeToolbarConfig = {
        const models = ctx.getSurfaceModelsByType(ShapeElementModel);
        if (!models.length) return null;

-        const enableCustomColor = ctx.std
-          .get(FeatureFlagService)
-          .getFlag('enable_color_picker');
-        const theme = ctx.themeProvider.edgelessTheme;
+        const enableCustomColor = ctx.features.getFlag('enable_color_picker');
+        const theme = ctx.theme.edgeless$.value;

        const firstModel = models[0];
        const originalFillColor = firstModel.fillColor;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts
@@ -16,10 +16,9 @@ import {
  TextAlign,
  type TextStyleProps,
 } from '@blocksuite/affine-model';
-import {
-  FeatureFlagService,
-  type ToolbarActions,
-  type ToolbarContext,
+import type {
+  ToolbarActions,
+  ToolbarContext,
 } from '@blocksuite/affine-shared/services';
 import {
  getMostCommonResolvedValue,
@@ -180,10 +179,8 @@ export function createTextActions<
        );
        if (!allowed) return null;

-        const enableCustomColor = ctx.std
-          .get(FeatureFlagService)
-          .getFlag('enable_color_picker');
-        const theme = ctx.themeProvider.edgelessTheme;
+        const enableCustomColor = ctx.features.getFlag('enable_color_picker');
+        const theme = ctx.theme.edgeless$.value;

        const palettes =
          type === 'shape'
--- a/blocksuite/affine/components/src/card-style-dropdown-menu/dropdown-menu.ts
+++ b/blocksuite/affine/components/src/card-style-dropdown-menu/dropdown-menu.ts
@@ -62,9 +62,7 @@ export class CardStyleDropdownMenu extends SignalWatcher(LitElement) {
  @property({ attribute: false })
  accessor style$!: Signal<string> | ReadonlySignal<string>;

-  icons$ = computed(
-    () => cardStyleMap[this.context.themeProvider.theme$.value]
-  );
+  icons$ = computed(() => cardStyleMap[this.context.theme.theme$.value]);

  override render() {
    const {
--- a/blocksuite/affine/shared/src/services/toolbar-service/context.ts
+++ b/blocksuite/affine/shared/src/services/toolbar-service/context.ts
@@ -18,6 +18,7 @@ import type {

 import { DocModeProvider } from '../doc-mode-service';
 import { EditPropsStore } from '../edit-props-store';
+import { FeatureFlagService } from '../feature-flag-service';
 import { TelemetryProvider, type TelemetryService } from '../telemetry-service';
 import { ThemeProvider } from '../theme-service';
 import { ToolbarRegistryIdentifier } from './registry';
@@ -98,18 +99,18 @@ abstract class ToolbarContextBase {
    return this.std.get(GfxControllerIdentifier);
  }

-  get themeProvider() {
-    return this.std.get(ThemeProvider);
-  }
-
  get theme() {
-    return this.themeProvider.theme;
+    return this.std.get(ThemeProvider);
  }

  get settings() {
    return this.std.get(EditPropsStore);
  }

+  get features() {
+    return this.std.get(FeatureFlagService);
+  }
+
  get toolbarRegistry() {
    return this.std.get(ToolbarRegistryIdentifier);
  }
--- a/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts
+++ b/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;