fix(editor): the / menu in the theme's colours

The menu came in the editor's own white or slate. It now sits on the
surface Material gives menus, as the app's other menus do, with the item
the arrow keys reach tinted as a focused menu item is.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MMm7usAo6q9ZZRoPkWjoxi
Signed-off-by: Tizian 「ティツィアーン」 <raisondetredev@pm.me>

halkyon_learn_flutter/lib/src/core/editor/editor_blocks.dart

@@ -153,7 +153,6 @@ BlockComponentBuilder _withPlaceholder(
 /// only, as the editor's (phones use the Insert button).
 CharacterShortcutEvent slashMenu(BuildContext context, EditorBlocks blocks) {
   final l10n = AppLocalizations.of(context);
-  final dark = Theme.of(context).brightness == Brightness.dark;
   return customSlashCommand(
     [
       for (final block in blocks.insertable)
@@ -176,7 +175,35 @@ CharacterShortcutEvent slashMenu(BuildContext context, EditorBlocks blocks) {
           },
         ),
     ],
-    style: dark ? SelectionMenuStyle.dark : SelectionMenuStyle.light,
+    style: _slashMenuStyle(Theme.of(context).colorScheme),
+  );
+}
+
+/// The `/` menu in the theme's colours rather than the editor's own: on the
+/// surface Material gives menus, as the app's other menus are, the item the
+/// arrow keys reach tinted as a focused menu item is.
+SelectionMenuStyle _slashMenuStyle(ColorScheme colors) {
+  // Material's state layer for a focused menu item: the text colour at 10%.
+  final focused = Color.alphaBlend(
+    colors.onSurface.withValues(alpha: 0.1),
+    colors.surfaceContainer,
+  );
+  return SelectionMenuStyle(
+    selectionMenuBackgroundColor: colors.surfaceContainer,
+    selectionMenuItemTextColor: colors.onSurface,
+    selectionMenuItemIconColor: colors.onSurfaceVariant,
+    selectionMenuItemSelectedTextColor: colors.onSurface,
+    selectionMenuItemSelectedIconColor: colors.onSurface,
+    selectionMenuItemSelectedColor: focused,
+    selectionMenuUnselectedLabelColor: colors.onSurfaceVariant,
+    selectionMenuDividerColor: colors.outlineVariant,
+    selectionMenuLinkBorderColor: colors.outline,
+    selectionMenuInvalidLinkColor: colors.error,
+    selectionMenuButtonColor: colors.primary,
+    selectionMenuButtonTextColor: colors.onPrimary,
+    selectionMenuButtonIconColor: colors.onPrimary,
+    selectionMenuButtonBorderColor: colors.primary,
+    selectionMenuTabIndicatorColor: colors.primary,
   );
 }
 

halkyon_learn_flutter/test/core/editor/editor_blocks_test.dart

@@ -1,7 +1,7 @@
 import 'dart:convert';
-import 'dart:typed_data';
 
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:halkyon_learn_flutter/l10n/app_localizations.dart';
 import 'package:halkyon_learn_flutter/src/core/content/rich_content.dart';
@@ -207,6 +207,36 @@ void main() {
     expect(editorState.document.root.children.single.attributes['level'], 2);
   });
 
+  testWidgets("the / menu takes the theme's colours", (tester) async {
+    final editorState = await writeNote(tester);
+    final slash = tester
+        .widget<AppFlowyEditor>(find.byType(AppFlowyEditor))
+        .characterShortcutEvents
+        .singleWhere((event) => event.character == '/');
+
+    await slash.handler(editorState);
+    await tester.pumpAndSettle();
+
+    final colors = Theme.of(tester.element(find.byType(AppFlowyEditor)))
+        .colorScheme;
+    final menu = tester.widget<SelectionMenuWidget>(
+      find.byType(SelectionMenuWidget),
+    );
+    expect(
+      menu.selectionMenuStyle.selectionMenuBackgroundColor,
+      colors.surfaceContainer,
+    );
+    expect(
+      menu.selectionMenuStyle.selectionMenuItemTextColor,
+      colors.onSurface,
+    );
+
+    // Closed again, as the editor expects when it goes.
+    await tester.sendKeyEvent(LogicalKeyboardKey.escape);
+    await tester.pumpAndSettle();
+    expect(find.byType(SelectionMenuWidget), findsNothing);
+  });
+
   testWidgets('a table shows its cells where it is shown read-only', (
     tester,
   ) async {