feat: adapt dark mode

Author: LucasXu0

frontend/app_flowy/lib/plugins/doc/document_page.dart

@@ -93,15 +93,20 @@ class _DocumentPageState extends State<DocumentPage> {
   }
 
   Widget _renderAppFlowyEditor(EditorState editorState) {
+    final theme = Theme.of(context);
     final editor = AppFlowyEditor(
       editorState: editorState,
-      editorStyle: customEditorStyle(context),
       customBuilders: {
         'horizontal_rule': HorizontalRuleWidgetBuilder(),
       },
       shortcutEvents: [
         insertHorizontalRule,
       ],
+      themeData: theme.copyWith(extensions: [
+        ...theme.extensions.values,
+        customEditorTheme(context),
+        ...customPluginTheme(context),
+      ]),
     );
     return Expanded(
       child: SizedBox.expand(

frontend/app_flowy/lib/plugins/doc/editor_styles.dart

@@ -3,59 +3,63 @@ import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
-EditorStyle customEditorStyle(BuildContext context) {
+const _baseFontSize = 14.0;
+
+EditorStyle customEditorTheme(BuildContext context) {
   final theme = context.watch<AppTheme>();
-  const baseFontSize = 14.0;
-  const basePadding = 12.0;
-  var textStyle = theme.isDark
-      ? BuiltInTextStyle.builtInDarkMode()
-      : BuiltInTextStyle.builtIn();
-  textStyle = textStyle.copyWith(
-    defaultTextStyle: textStyle.defaultTextStyle.copyWith(
+
+  var editorStyle = theme.isDark ? EditorStyle.dark : EditorStyle.light;
+  editorStyle = editorStyle.copyWith(
+    textStyle: editorStyle.textStyle?.copyWith(
+      fontFamily: 'poppins',
+      fontSize: _baseFontSize,
+    ),
+    placeholderTextStyle: editorStyle.placeholderTextStyle?.copyWith(
       fontFamily: 'poppins',
-      fontSize: baseFontSize,
+      fontSize: _baseFontSize,
     ),
-    bold: textStyle.bold.copyWith(
+    bold: editorStyle.bold?.copyWith(
       fontWeight: FontWeight.w500,
     ),
   );
-  return EditorStyle.defaultStyle().copyWith(
-    padding: const EdgeInsets.symmetric(horizontal: 80),
-    textStyle: textStyle,
-    pluginStyles: {
-      'text/heading': builtInPluginStyle
-        ..update(
-          'textStyle',
-          (_) => (EditorState editorState, Node node) {
-            final headingToFontSize = {
-              'h1': baseFontSize + 12,
-              'h2': baseFontSize + 8,
-              'h3': baseFontSize + 4,
-              'h4': baseFontSize,
-              'h5': baseFontSize,
-              'h6': baseFontSize,
-            };
-            final fontSize =
-                headingToFontSize[node.attributes.heading] ?? baseFontSize;
-            return TextStyle(fontSize: fontSize, fontWeight: FontWeight.w600);
-          },
-        )
-        ..update(
-          'padding',
-          (_) => (EditorState editorState, Node node) {
-            final headingToPadding = {
-              'h1': basePadding + 6,
-              'h2': basePadding + 4,
-              'h3': basePadding + 2,
-              'h4': basePadding,
-              'h5': basePadding,
-              'h6': basePadding,
-            };
-            final padding =
-                headingToPadding[node.attributes.heading] ?? basePadding;
-            return EdgeInsets.only(bottom: padding);
-          },
-        )
+  return editorStyle;
+}
+
+Iterable<ThemeExtension<dynamic>> customPluginTheme(BuildContext context) {
+  final theme = context.watch<AppTheme>();
+  const basePadding = 12.0;
+  var headingPluginStyle =
+      theme.isDark ? HeadingPluginStyle.dark : HeadingPluginStyle.light;
+  headingPluginStyle = headingPluginStyle.copyWith(
+    textStyle: (EditorState editorState, Node node) {
+      final headingToFontSize = {
+        'h1': _baseFontSize + 12,
+        'h2': _baseFontSize + 8,
+        'h3': _baseFontSize + 4,
+        'h4': _baseFontSize,
+        'h5': _baseFontSize,
+        'h6': _baseFontSize,
+      };
+      final fontSize =
+          headingToFontSize[node.attributes.heading] ?? _baseFontSize;
+      return TextStyle(fontSize: fontSize, fontWeight: FontWeight.w600);
+    },
+    padding: (EditorState editorState, Node node) {
+      final headingToPadding = {
+        'h1': basePadding + 6,
+        'h2': basePadding + 4,
+        'h3': basePadding + 2,
+        'h4': basePadding,
+        'h5': basePadding,
+        'h6': basePadding,
+      };
+      final padding = headingToPadding[node.attributes.heading] ?? basePadding;
+      return EdgeInsets.only(bottom: padding);
     },
   );
+  final pluginTheme =
+      theme.isDark ? darkPlguinStyleExtension : lightPlguinStyleExtension;
+  return pluginTheme.toList()
+    ..removeWhere((element) => element is HeadingPluginStyle)
+    ..add(headingPluginStyle);
 }

frontend/app_flowy/lib/plugins/doc/presentation/plugins/horizontal_rule_node_widget.dart

@@ -38,9 +38,11 @@ ShortcutEventHandler _insertHorzaontalRule = (editorState, event) {
 
 SelectionMenuItem horizontalRuleMenuItem = SelectionMenuItem(
   name: () => 'Horizontal rule',
-  icon: const Icon(
+  icon: (editorState, onSelected) => Icon(
     Icons.horizontal_rule,
-    color: Colors.black,
+    color: onSelected
+        ? editorState.editorStyle.selectionMenuItemSelectedIconColor
+        : editorState.editorStyle.selectionMenuItemIconColor,
     size: 18.0,
   ),
   keywords: ['horizontal rule'],

frontend/app_flowy/packages/appflowy_editor/example/lib/main.dart

@@ -10,7 +10,6 @@ import 'package:flutter/services.dart';
 
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:universal_html/html.dart' as html;
 
@@ -38,7 +37,10 @@ class MyApp extends StatelessWidget {
       debugShowCheckedModeBanner: false,
       theme: ThemeData(
         primarySwatch: Colors.blue,
+        // extensions: [HeadingPluginStyle.light],
       ),
+      darkTheme: ThemeData.dark(),
+      themeMode: ThemeMode.dark,
       home: const MyHomePage(title: 'AppFlowyEditor Example'),
     );
   }
@@ -56,7 +58,6 @@ class _MyHomePageState extends State<MyHomePage> {
   int _pageIndex = 0;
   EditorState? _editorState;
   bool darkMode = false;
-  EditorStyle _editorStyle = EditorStyle.defaultStyle();
   Future<String>? _jsonString;
 
   @override
@@ -125,12 +126,31 @@ class _MyHomePageState extends State<MyHomePage> {
           _editorState!.transactionStream.listen((event) {
             debugPrint('Transaction: ${event.toJson()}');
           });
+          final themeData = darkMode
+              ? ThemeData.dark().copyWith(extensions: [
+                  HeadingPluginStyle.dark,
+                  CheckboxPluginStyle.dark,
+                  NumberListPluginStyle.dark,
+                  QuotedTextPluginStyle.dark,
+                  BulletedListPluginStyle.dark,
+                  EditorStyle.dark,
+                ])
+              : ThemeData.light().copyWith(
+                  extensions: [
+                    HeadingPluginStyle.light,
+                    CheckboxPluginStyle.light,
+                    NumberListPluginStyle.light,
+                    QuotedTextPluginStyle.light,
+                    BulletedListPluginStyle.light,
+                    EditorStyle.light,
+                  ],
+                );
           return Container(
             color: darkMode ? Colors.black : Colors.white,
             width: MediaQuery.of(context).size.width,
             child: AppFlowyEditor(
               editorState: _editorState!,
-              editorStyle: _editorStyle,
+              themeData: themeData,
               editable: true,
               customBuilders: {
                 'text/code_block': CodeBlockNodeWidgetBuilder(),
@@ -186,8 +206,6 @@ class _MyHomePageState extends State<MyHomePage> {
           icon: const Icon(Icons.color_lens),
           onPressed: () {
             setState(() {
-              _editorStyle =
-                  darkMode ? EditorStyle.defaultStyle() : _customizedStyle();
               darkMode = !darkMode;
             });
           },
@@ -256,44 +274,4 @@ class _MyHomePageState extends State<MyHomePage> {
       });
     }
   }
-
-  EditorStyle _customizedStyle() {
-    final editorStyle = EditorStyle.defaultStyle();
-    return editorStyle.copyWith(
-      cursorColor: Colors.white,
-      selectionColor: Colors.blue.withOpacity(0.3),
-      textStyle: editorStyle.textStyle.copyWith(
-        defaultTextStyle: GoogleFonts.poppins().copyWith(
-          color: Colors.white,
-          fontSize: 14.0,
-        ),
-        defaultPlaceholderTextStyle: GoogleFonts.poppins().copyWith(
-          color: Colors.white.withOpacity(0.5),
-          fontSize: 14.0,
-        ),
-        bold: const TextStyle(fontWeight: FontWeight.w900),
-        code: TextStyle(
-          fontStyle: FontStyle.italic,
-          color: Colors.red[300],
-          backgroundColor: Colors.grey.withOpacity(0.3),
-        ),
-        highlightColorHex: '0x6FFFEB3B',
-      ),
-      pluginStyles: {
-        'text/quote': builtInPluginStyle
-          ..update(
-            'textStyle',
-            (_) {
-              return (EditorState editorState, Node node) {
-                return TextStyle(
-                  color: Colors.blue[200],
-                  fontStyle: FontStyle.italic,
-                  fontSize: 12.0,
-                );
-              };
-            },
-          ),
-      },
-    );
-  }
 }

frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/code_block_node_widget.dart

@@ -46,7 +46,7 @@ ShortcutEventHandler _ignorekHandler = (editorState, event) {
 
 SelectionMenuItem codeBlockMenuItem = SelectionMenuItem(
   name: () => 'Code Block',
-  icon: const Icon(
+  icon: (_, __) => const Icon(
     Icons.abc,
     color: Colors.black,
     size: 18.0,
@@ -167,7 +167,7 @@ class __CodeBlockNodeWidgeState extends State<_CodeBlockNodeWidge>
         textNode: widget.textNode,
         editorState: widget.editorState,
         textSpanDecorator: (textSpan) => TextSpan(
-          style: widget.editorState.editorStyle.textStyle.defaultTextStyle,
+          style: widget.editorState.editorStyle.textStyle,
           children: codeTextSpan,
         ),
       ),

frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/horizontal_rule_node_widget.dart

@@ -38,7 +38,7 @@ ShortcutEventHandler _insertHorzaontalRule = (editorState, event) {
 
 SelectionMenuItem horizontalRuleMenuItem = SelectionMenuItem(
   name: () => 'Horizontal rule',
-  icon: const Icon(
+  icon: (_, __) => const Icon(
     Icons.horizontal_rule,
     color: Colors.black,
     size: 18.0,

frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/tex_block_node_widget.dart

@@ -6,7 +6,7 @@ import 'package:flutter_math_fork/flutter_math.dart';
 
 SelectionMenuItem teXBlockMenuItem = SelectionMenuItem(
   name: () => 'Tex',
-  icon: const Icon(
+  icon: (_, __) => const Icon(
     Icons.text_fields_rounded,
     color: Colors.black,
     size: 18.0,

frontend/app_flowy/packages/appflowy_editor/lib/appflowy_editor.dart

@@ -31,3 +31,5 @@ export 'src/render/rich_text/default_selectable.dart';
 export 'src/render/rich_text/flowy_rich_text.dart';
 export 'src/render/selection_menu/selection_menu_widget.dart';
 export 'src/l10n/l10n.dart';
+export 'src/render/style/plugin_styles.dart';
+export 'src/render/style/editor_style.dart';

frontend/app_flowy/packages/appflowy_editor/lib/src/editor_state.dart

@@ -59,13 +59,14 @@ class EditorState {
   /// Stores the selection menu items.
   List<SelectionMenuItem> selectionMenuItems = [];
 
-  /// Stores the editor style.
-  EditorStyle editorStyle = EditorStyle.defaultStyle();
-
   /// Operation stream.
   Stream<Transaction> get transactionStream => _observer.stream;
   final StreamController<Transaction> _observer = StreamController.broadcast();
 
+  late ThemeData themeData;
+  EditorStyle get editorStyle =>
+      themeData.extension<EditorStyle>() ?? EditorStyle.light;
+
   final UndoManager undoManager = UndoManager();
   Selection? _cursorSelection;
 

frontend/app_flowy/packages/appflowy_editor/lib/src/extensions/theme_extension.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+extension ThemeExtension on ThemeData {
+  T? extensionOrNull<T>() {
+    if (extensions.containsKey(T)) {
+      return extensions[T] as T;
+    }
+    return null;
+  }
+}