Selaa lähdekoodia

feat: support dark mode for number-list and bulleted-list

Lucas.Xu 2 vuotta sitten
vanhempi
commit
3fb997af84

+ 19 - 1
frontend/app_flowy/lib/plugins/doc/editor_styles.dart

@@ -55,7 +55,25 @@ EditorStyle customEditorStyle(BuildContext context) {
                 headingToPadding[node.attributes.heading] ?? basePadding;
             return EdgeInsets.only(bottom: padding);
           },
-        )
+        ),
+      'text/number-list': builtInPluginStyle
+        ..addAll(
+          {
+            'numberColor': (EditorState editorState, Node node) {
+              final theme = context.watch<AppTheme>();
+              return theme.isDark ? Colors.white : Colors.black;
+            },
+          },
+        ),
+      'text/bulleted-list': builtInPluginStyle
+        ..addAll(
+          {
+            'bulletColor': (EditorState editorState, Node node) {
+              final theme = context.watch<AppTheme>();
+              return theme.isDark ? Colors.white : Colors.black;
+            },
+          },
+        ),
     },
   );
 }

+ 13 - 0
frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/bulleted_list_text.dart

@@ -64,6 +64,18 @@ class _BulletedListTextNodeWidgetState extends State<BulletedListTextNodeWidget>
     return super.baseOffset.translate(0, padding.top);
   }
 
+  Color get bulletColor {
+    final bulletColor = widget.editorState.editorStyle.style(
+      widget.editorState,
+      widget.textNode,
+      'bulletColor',
+    );
+    if (bulletColor is Color) {
+      return bulletColor;
+    }
+    return Colors.black;
+  }
+
   @override
   Widget buildWithSingle(BuildContext context) {
     return Padding(
@@ -76,6 +88,7 @@ class _BulletedListTextNodeWidgetState extends State<BulletedListTextNodeWidget>
             width: iconSize?.width,
             height: iconSize?.height,
             padding: iconPadding,
+            color: bulletColor,
             name: 'point',
           ),
           Flexible(

+ 17 - 2
frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/number_list_text.dart

@@ -58,6 +58,18 @@ class _NumberListTextNodeWidgetState extends State<NumberListTextNodeWidget>
     return super.baseOffset.translate(0, padding.top);
   }
 
+  Color get numberColor {
+    final numberColor = widget.editorState.editorStyle.style(
+      widget.editorState,
+      widget.textNode,
+      'numberColor',
+    );
+    if (numberColor is Color) {
+      return numberColor;
+    }
+    return Colors.black;
+  }
+
   @override
   Widget build(BuildContext context) {
     return Padding(
@@ -70,8 +82,11 @@ class _NumberListTextNodeWidgetState extends State<NumberListTextNodeWidget>
             padding: iconPadding,
             child: Text(
               '${widget.textNode.attributes.number.toString()}.',
-              // FIXME: customize
-              style: const TextStyle(fontSize: 16.0, color: Colors.black),
+              style: TextStyle(
+                fontSize: widget.editorState.editorStyle.textStyle
+                    .defaultTextStyle.fontSize,
+                color: numberColor,
+              ),
             ),
           ),
           Flexible(

+ 12 - 4
frontend/app_flowy/packages/appflowy_editor/lib/src/render/style/editor_style.dart

@@ -117,12 +117,20 @@ Map<String, PluginStyle> builtInTextStylers = {
     ),
   'text/bulleted-list': builtInPluginStyle,
   'text/number-list': builtInPluginStyle
-    ..update(
-      'iconPadding',
-      (_) => (EditorState editorState, Node node) {
+    ..addAll({
+      'numberColor': (EditorState editorState, Node node) {
+        return Colors.black;
+      },
+      'iconPadding': (EditorState editorState, Node node) {
         return const EdgeInsets.only(left: 5.0, right: 5.0);
       },
-    ),
+    }),
+  'text/bulleted-list': builtInPluginStyle
+    ..addAll({
+      'bulletColor': (EditorState editorState, Node node) {
+        return Colors.black;
+      },
+    }),
   'text/quote': builtInPluginStyle,
   'image': builtInPluginStyle,
 };