Fix theming for dark themes (#365)

fleather-editor · Jun 15, 2024 · 810ce7a · 810ce7a
1 parent e296465
commit 810ce7a
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 35 deletions.
diff --git a/packages/fleather/lib/src/widgets/editor.dart b/packages/fleather/lib/src/widgets/editor.dart
@@ -81,11 +81,12 @@ typedef FleatherEmbedBuilder = Widget Function(
 /// Only supports "horizontal rule" embeds.
 Widget defaultFleatherEmbedBuilder(BuildContext context, EmbedNode node) {
   if (node.value.type == 'hr') {
-    final theme = FleatherTheme.of(context)!;
+    final fleatherThemeData = FleatherTheme.of(context)!;
+
     return Divider(
-      height: theme.paragraph.style.fontSize! * theme.paragraph.style.height!,
-      thickness: 2,
-      color: Colors.grey.shade200,
+      height: fleatherThemeData.horizontalRule.height,
+      thickness: fleatherThemeData.horizontalRule.thickness,
+      color: fleatherThemeData.horizontalRule.color,
     );
   }
   throw UnimplementedError(

diff --git a/packages/fleather/lib/src/widgets/theme.dart b/packages/fleather/lib/src/widgets/theme.dart
@@ -104,6 +104,9 @@ class FleatherThemeData {
   /// Style theme for code blocks.
   final TextBlockTheme code;
 
+  /// Style theme for horizontal rule.
+  final HorizontalRuleThemeData horizontalRule;
+
   FleatherThemeData({
     required this.bold,
     required this.italic,
@@ -121,6 +124,7 @@ class FleatherThemeData {
     required this.lists,
     required this.quote,
     required this.code,
+    required this.horizontalRule,
   });
 
   factory FleatherThemeData.fallback(BuildContext context) {
@@ -158,8 +162,8 @@ class FleatherThemeData {
       underline: const TextStyle(decoration: TextDecoration.underline),
       strikethrough: const TextStyle(decoration: TextDecoration.lineThrough),
       inlineCode: InlineCodeThemeData(
-        backgroundColor: Colors.grey.shade100,
-        radius: const Radius.circular(3),
+        backgroundColor: themeData.colorScheme.surfaceContainerHigh,
+        radius: const Radius.circular(2),
         style: inlineCodeStyle,
         heading1: inlineCodeStyle.copyWith(
           fontSize: 32,
@@ -245,23 +249,31 @@ class FleatherThemeData {
         lineSpacing: const VerticalSpacing(top: 6, bottom: 2),
         decoration: BoxDecoration(
           border: BorderDirectional(
-            start: BorderSide(width: 4, color: Colors.grey.shade300),
+            start: BorderSide(
+              width: 4,
+              color: themeData.colorScheme.surfaceContainerHigh,
+            ),
           ),
         ),
       ),
       code: TextBlockTheme(
         style: TextStyle(
-          color: Colors.blue.shade900.withOpacity(0.9),
+          color: themeData.colorScheme.primary.withOpacity(0.8),
           fontFamily: fontFamily,
           fontSize: 13.0,
           height: 1.4,
         ),
         spacing: baseSpacing,
         decoration: BoxDecoration(
-          color: Colors.grey.shade50,
+          color: themeData.colorScheme.surfaceContainerHigh,
           borderRadius: BorderRadius.circular(2),
         ),
       ),
+      horizontalRule: HorizontalRuleThemeData(
+        height: baseStyle.fontSize! * baseStyle.height!,
+        thickness: 2,
+        color: themeData.colorScheme.surfaceContainerHigh,
+      ),
     );
   }
 
@@ -282,6 +294,7 @@ class FleatherThemeData {
     TextBlockTheme? lists,
     TextBlockTheme? quote,
     TextBlockTheme? code,
+    HorizontalRuleThemeData? horizontalRuleThemeData,
   }) {
     return FleatherThemeData(
       bold: bold ?? this.bold,
@@ -300,6 +313,7 @@ class FleatherThemeData {
       lists: lists ?? this.lists,
       quote: quote ?? this.quote,
       code: code ?? this.code,
+      horizontalRule: horizontalRuleThemeData ?? horizontalRule,
     );
   }
 
@@ -410,3 +424,21 @@ class InlineCodeThemeData {
   int get hashCode =>
       Object.hash(style, heading1, heading2, heading3, backgroundColor, radius);
 }
+
+/// Theme data for horizontal rule.
+class HorizontalRuleThemeData {
+  /// Height for horizontal rule.
+  final double height;
+
+  /// Thickness for horizontal rule.
+  final double thickness;
+
+  /// Color for horizontal rule.
+  final Color color;
+
+  HorizontalRuleThemeData({
+    required this.height,
+    required this.thickness,
+    required this.color,
+  });
+}
diff --git a/packages/fleather/test/widgets/editor_input_client_mixin_deltas_test.dart b/packages/fleather/test/widgets/editor_input_client_mixin_deltas_test.dart
@@ -99,32 +99,35 @@ void main() {
       when(() => editorState.textEditingValue)
           .thenReturn(initialTextEditingValue);
       when(() => editorState.themeData).thenReturn(FleatherThemeData(
-          bold: const TextStyle(),
-          italic: const TextStyle(),
-          underline: const TextStyle(),
-          strikethrough: const TextStyle(),
-          inlineCode: InlineCodeThemeData(style: const TextStyle()),
-          link: const TextStyle(),
-          paragraph: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          heading1: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          heading2: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          heading3: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          heading4: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          heading5: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          heading6: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          lists: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          quote: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing()),
-          code: TextBlockTheme(
-              style: const TextStyle(), spacing: const VerticalSpacing())));
+        bold: const TextStyle(),
+        italic: const TextStyle(),
+        underline: const TextStyle(),
+        strikethrough: const TextStyle(),
+        inlineCode: InlineCodeThemeData(style: const TextStyle()),
+        link: const TextStyle(),
+        paragraph: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        heading1: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        heading2: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        heading3: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        heading4: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        heading5: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        heading6: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        lists: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        quote: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        code: TextBlockTheme(
+            style: const TextStyle(), spacing: const VerticalSpacing()),
+        horizontalRule: HorizontalRuleThemeData(
+            height: 0, thickness: 0, color: Colors.transparent),
+      ));
       when(() => rawEditor.controller).thenReturn(controller);
       when(() => rawEditor.readOnly).thenReturn(false);
       when(() => rawEditor.autocorrect).thenReturn(true);

diff --git a/packages/fleather/test/widgets/theme_test.dart b/packages/fleather/test/widgets/theme_test.dart
@@ -48,6 +48,8 @@ void main() {
             style: TextStyle(
                 color: Colors.blue.shade900.withOpacity(0.9), fontSize: 13.0),
             spacing: const VerticalSpacing(top: 6.0, bottom: 10.0)),
+        horizontalRule:
+            HorizontalRuleThemeData(height: 2, thickness: 2, color: Colors.red),
       );
 
       final theme2 = FleatherThemeData(
@@ -92,6 +94,8 @@ void main() {
             style: TextStyle(
                 color: Colors.blue.shade800.withOpacity(0.9), fontSize: 12.0),
             spacing: const VerticalSpacing(top: 4.0, bottom: 8.0)),
+        horizontalRule: HorizontalRuleThemeData(
+            height: 4, thickness: 4, color: Colors.green),
       );
 
       // Merge the two instances