Fix hardcoded colors and improve Darktheme (#210)
diff --git a/packages/flutter_markdown/lib/src/style_sheet.dart b/packages/flutter_markdown/lib/src/style_sheet.dart
index 2295aa6..5f66e0e 100644
--- a/packages/flutter_markdown/lib/src/style_sheet.dart
+++ b/packages/flutter_markdown/lib/src/style_sheet.dart
@@ -81,7 +81,7 @@
a: const TextStyle(color: Colors.blue),
p: theme.textTheme.body1,
code: theme.textTheme.body1.copyWith(
- backgroundColor: Colors.grey.shade200,
+ backgroundColor: theme.cardTheme?.color ?? theme.cardColor,
fontFamily: "monospace",
fontSize: theme.textTheme.body1.fontSize * 0.85,
),
@@ -105,10 +105,13 @@
tableHead: const TextStyle(fontWeight: FontWeight.w600),
tableBody: theme.textTheme.body1,
tableHeadAlign: TextAlign.center,
- tableBorder: TableBorder.all(color: Colors.grey.shade300, width: 0),
+ tableBorder: TableBorder.all(
+ color: theme.dividerColor,
+ width: 1,
+ ),
tableColumnWidth: const FlexColumnWidth(),
tableCellsPadding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
- tableCellsDecoration: BoxDecoration(color: Colors.grey.shade50),
+ tableCellsDecoration: const BoxDecoration(),
blockquotePadding: const EdgeInsets.all(8.0),
blockquoteDecoration: BoxDecoration(
color: Colors.blue.shade100,
@@ -116,12 +119,15 @@
),
codeblockPadding: const EdgeInsets.all(8.0),
codeblockDecoration: BoxDecoration(
- color: Colors.grey.shade200,
+ color: theme.cardTheme?.color ?? theme.cardColor,
borderRadius: BorderRadius.circular(2.0),
),
horizontalRuleDecoration: BoxDecoration(
border: Border(
- top: BorderSide(width: 5.0, color: Colors.grey.shade300),
+ top: BorderSide(
+ width: 5.0,
+ color: theme.dividerColor,
+ ),
),
),
);
@@ -131,40 +137,51 @@
factory MarkdownStyleSheet.fromCupertinoTheme(CupertinoThemeData theme) {
assert(theme?.textTheme?.textStyle?.fontSize != null);
return MarkdownStyleSheet(
- a: const TextStyle(color: CupertinoColors.link),
+ a: theme.textTheme.textStyle.copyWith(
+ color: theme.brightness == Brightness.dark
+ ? CupertinoColors.link.darkColor
+ : CupertinoColors.link.color,
+ ),
p: theme.textTheme.textStyle,
code: theme.textTheme.textStyle.copyWith(
- backgroundColor: CupertinoColors.systemGrey6,
+ backgroundColor: theme.brightness == Brightness.dark
+ ? CupertinoColors.systemGrey6.darkColor
+ : CupertinoColors.systemGrey6.color,
fontFamily: "monospace",
fontSize: theme.textTheme.textStyle.fontSize * 0.85,
),
- h1: TextStyle(
+ h1: theme.textTheme.textStyle.copyWith(
fontWeight: FontWeight.w500,
fontSize: theme.textTheme.textStyle.fontSize + 10,
),
- h2: TextStyle(
+ h2: theme.textTheme.textStyle.copyWith(
fontWeight: FontWeight.w500,
fontSize: theme.textTheme.textStyle.fontSize + 8,
),
- h3: TextStyle(
+ h3: theme.textTheme.textStyle.copyWith(
fontWeight: FontWeight.w500,
fontSize: theme.textTheme.textStyle.fontSize + 6,
),
- h4: TextStyle(
+ h4: theme.textTheme.textStyle.copyWith(
fontWeight: FontWeight.w500,
fontSize: theme.textTheme.textStyle.fontSize + 4,
),
- h5: TextStyle(
+ h5: theme.textTheme.textStyle.copyWith(
fontWeight: FontWeight.w500,
fontSize: theme.textTheme.textStyle.fontSize + 2,
),
- h6: TextStyle(
+ h6: theme.textTheme.textStyle.copyWith(
fontWeight: FontWeight.w500,
- fontSize: theme.textTheme.textStyle.fontSize,
),
- em: const TextStyle(fontStyle: FontStyle.italic),
- strong: const TextStyle(fontWeight: FontWeight.bold),
- del: const TextStyle(decoration: TextDecoration.lineThrough),
+ em: theme.textTheme.textStyle.copyWith(
+ fontStyle: FontStyle.italic,
+ ),
+ strong: theme.textTheme.textStyle.copyWith(
+ fontWeight: FontWeight.bold,
+ ),
+ del: theme.textTheme.textStyle.copyWith(
+ decoration: TextDecoration.lineThrough,
+ ),
blockquote: theme.textTheme.textStyle,
img: theme.textTheme.textStyle,
checkbox: theme.textTheme.textStyle.copyWith(
@@ -173,31 +190,45 @@
blockSpacing: 8,
listIndent: 24,
listBullet: theme.textTheme.textStyle,
- tableHead: const TextStyle(fontWeight: FontWeight.w600),
+ tableHead: theme.textTheme.textStyle.copyWith(
+ fontWeight: FontWeight.w600,
+ ),
tableBody: theme.textTheme.textStyle,
tableHeadAlign: TextAlign.center,
tableBorder: TableBorder.all(color: CupertinoColors.separator, width: 0),
tableColumnWidth: const FlexColumnWidth(),
tableCellsPadding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
- tableCellsDecoration: BoxDecoration(color: CupertinoColors.systemGrey6),
+ tableCellsDecoration: BoxDecoration(
+ color: theme.brightness == Brightness.dark
+ ? CupertinoColors.systemGrey6.darkColor
+ : CupertinoColors.systemGrey6.color,
+ ),
blockquotePadding: const EdgeInsets.all(16),
- blockquoteDecoration: const BoxDecoration(
- color: CupertinoColors.systemGrey6,
+ blockquoteDecoration: BoxDecoration(
+ color: theme.brightness == Brightness.dark
+ ? CupertinoColors.systemGrey6.darkColor
+ : CupertinoColors.systemGrey6.color,
border: Border(
left: BorderSide(
- color: CupertinoColors.systemGrey4,
+ color: theme.brightness == Brightness.dark
+ ? CupertinoColors.systemGrey4.darkColor
+ : CupertinoColors.systemGrey4.color,
width: 4,
),
),
),
codeblockPadding: const EdgeInsets.all(8),
- codeblockDecoration: const BoxDecoration(
- color: CupertinoColors.systemGrey6,
+ codeblockDecoration: BoxDecoration(
+ color: theme.brightness == Brightness.dark
+ ? CupertinoColors.systemGrey6.darkColor
+ : CupertinoColors.systemGrey6.color,
),
- horizontalRuleDecoration: const BoxDecoration(
+ horizontalRuleDecoration: BoxDecoration(
border: Border(
top: BorderSide(
- color: CupertinoColors.systemGrey4,
+ color: theme.brightness == Brightness.dark
+ ? CupertinoColors.systemGrey4.darkColor
+ : CupertinoColors.systemGrey4.color,
width: 1,
),
),
@@ -214,7 +245,7 @@
a: const TextStyle(color: Colors.blue),
p: theme.textTheme.body1,
code: theme.textTheme.body1.copyWith(
- backgroundColor: Colors.grey.shade200,
+ backgroundColor: theme.cardTheme?.color ?? theme.cardColor,
fontFamily: "monospace",
fontSize: theme.textTheme.body1.fontSize * 0.85,
),
@@ -238,10 +269,12 @@
tableHead: const TextStyle(fontWeight: FontWeight.w600),
tableBody: theme.textTheme.body1,
tableHeadAlign: TextAlign.center,
- tableBorder: TableBorder.all(color: Colors.grey.shade300),
+ tableBorder: TableBorder.all(
+ color: theme.dividerColor,
+ ),
tableColumnWidth: const FlexColumnWidth(),
tableCellsPadding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
- tableCellsDecoration: BoxDecoration(color: Colors.grey.shade50),
+ tableCellsDecoration: const BoxDecoration(),
blockquotePadding: const EdgeInsets.all(8.0),
blockquoteDecoration: BoxDecoration(
color: Colors.blue.shade100,
@@ -249,12 +282,15 @@
),
codeblockPadding: const EdgeInsets.all(8.0),
codeblockDecoration: BoxDecoration(
- color: Colors.grey.shade200,
+ color: theme.cardTheme?.color ?? theme.cardColor,
borderRadius: BorderRadius.circular(2.0),
),
horizontalRuleDecoration: BoxDecoration(
border: Border(
- top: BorderSide(width: 5.0, color: Colors.grey.shade300),
+ top: BorderSide(
+ width: 5.0,
+ color: theme.dividerColor,
+ ),
),
),
);
diff --git a/packages/flutter_markdown/test/flutter_markdown_test.dart b/packages/flutter_markdown/test/flutter_markdown_test.dart
index b0632ff..055ef9a 100644
--- a/packages/flutter_markdown/test/flutter_markdown_test.dart
+++ b/packages/flutter_markdown/test/flutter_markdown_test.dart
@@ -671,6 +671,158 @@
expect(style1.hashCode, equals(style2.hashCode));
});
+ testWidgets('MarkdownStyleSheet.fromCupertinoTheme', (WidgetTester tester) async {
+ final CupertinoThemeData cTheme = CupertinoThemeData(
+ brightness: Brightness.dark,
+ );
+
+ final MarkdownStyleSheet style = MarkdownStyleSheet.fromCupertinoTheme(cTheme);
+
+ // a
+ expect(style.a.color, CupertinoColors.link.darkColor);
+ expect(style.a.fontSize, cTheme.textTheme.textStyle.fontSize);
+
+ // p
+ expect(style.p, cTheme.textTheme.textStyle);
+
+ // code
+ expect(style.code.color, cTheme.textTheme.textStyle.color);
+ expect(style.code.fontSize, cTheme.textTheme.textStyle.fontSize * 0.85);
+ expect(style.code.fontFamily, 'monospace');
+ expect(style.code.backgroundColor, CupertinoColors.systemGrey6.darkColor);
+
+ // H1
+ expect(style.h1.color, cTheme.textTheme.textStyle.color);
+ expect(style.h1.fontSize, cTheme.textTheme.textStyle.fontSize + 10);
+ expect(style.h1.fontWeight, FontWeight.w500);
+
+ // H2
+ expect(style.h2.color, cTheme.textTheme.textStyle.color);
+ expect(style.h2.fontSize, cTheme.textTheme.textStyle.fontSize + 8);
+ expect(style.h2.fontWeight, FontWeight.w500);
+
+ // H3
+ expect(style.h3.color, cTheme.textTheme.textStyle.color);
+ expect(style.h3.fontSize, cTheme.textTheme.textStyle.fontSize + 6);
+ expect(style.h3.fontWeight, FontWeight.w500);
+
+ // H4
+ expect(style.h4.color, cTheme.textTheme.textStyle.color);
+ expect(style.h4.fontSize, cTheme.textTheme.textStyle.fontSize + 4);
+ expect(style.h4.fontWeight, FontWeight.w500);
+
+ // H5
+ expect(style.h5.color, cTheme.textTheme.textStyle.color);
+ expect(style.h5.fontSize, cTheme.textTheme.textStyle.fontSize + 2);
+ expect(style.h5.fontWeight, FontWeight.w500);
+
+ // H6
+ expect(style.h6.color, cTheme.textTheme.textStyle.color);
+ expect(style.h6.fontSize, cTheme.textTheme.textStyle.fontSize);
+ expect(style.h6.fontWeight, FontWeight.w500);
+
+ // em
+ expect(style.em.color, cTheme.textTheme.textStyle.color);
+ expect(style.em.fontSize, cTheme.textTheme.textStyle.fontSize);
+ expect(style.em.fontStyle, FontStyle.italic);
+
+ // strong
+ expect(style.strong.color, cTheme.textTheme.textStyle.color);
+ expect(style.strong.fontSize, cTheme.textTheme.textStyle.fontSize);
+ expect(style.strong.fontWeight, FontWeight.bold);
+
+ // del
+ expect(style.del.color, cTheme.textTheme.textStyle.color);
+ expect(style.del.fontSize, cTheme.textTheme.textStyle.fontSize);
+ expect(style.del.decoration, TextDecoration.lineThrough);
+
+ // blockqoute
+ expect(style.blockquote, cTheme.textTheme.textStyle);
+
+ // img
+ expect(style.img, cTheme.textTheme.textStyle);
+
+ // checkbox
+ expect(style.checkbox.color, cTheme.primaryColor);
+ expect(style.checkbox.fontSize, cTheme.textTheme.textStyle.fontSize);
+
+ // tableHead
+ expect(style.tableHead.color, cTheme.textTheme.textStyle.color);
+ expect(style.tableHead.fontSize, cTheme.textTheme.textStyle.fontSize);
+ expect(style.tableHead.fontWeight, FontWeight.w600);
+
+ // tableBody
+ expect(style.tableBody, cTheme.textTheme.textStyle);
+ });
+
+ testWidgets('MarkdownStyleSheet.fromTheme', (WidgetTester tester) async {
+ final theme = ThemeData.dark().copyWith(
+ textTheme: TextTheme(
+ body1: TextStyle(fontSize: 12.0),
+ ),
+ );
+
+ final MarkdownStyleSheet style = MarkdownStyleSheet.fromTheme(theme);
+
+ // a
+ expect(style.a.color, Colors.blue);
+
+ // p
+ expect(style.p, theme.textTheme.body1);
+
+ // code
+ expect(style.code.color, theme.textTheme.body1.color);
+ expect(style.code.fontSize, theme.textTheme.body1.fontSize * 0.85);
+ expect(style.code.fontFamily, 'monospace');
+ expect(style.code.backgroundColor, theme.cardColor);
+
+ // H1
+ expect(style.h1, theme.textTheme.headline);
+
+ // H2
+ expect(style.h2, theme.textTheme.title);
+
+ // H3
+ expect(style.h3, theme.textTheme.subhead);
+
+ // H4
+ expect(style.h4, theme.textTheme.body2);
+
+ // H5
+ expect(style.h5, theme.textTheme.body2);
+
+ // H6
+ expect(style.h6, theme.textTheme.body2);
+
+ // em
+ expect(style.em.fontStyle, FontStyle.italic);
+ expect(style.em.color, theme.textTheme.body1.color);
+
+ // strong
+ expect(style.strong.fontWeight, FontWeight.bold);
+ expect(style.strong.color, theme.textTheme.body1.color);
+
+ // del
+ expect(style.del.decoration, TextDecoration.lineThrough);
+ expect(style.del.color, theme.textTheme.body1.color);
+
+ // blockqoute
+ expect(style.blockquote, theme.textTheme.body1);
+
+ // img
+ expect(style.img, theme.textTheme.body1);
+
+ // checkbox
+ expect(style.checkbox.color, theme.primaryColor);
+ expect(style.checkbox.fontSize, theme.textTheme.body1.fontSize);
+
+ // tableHead
+ expect(style.tableHead.fontWeight, FontWeight.w600);
+
+ // tableBody
+ expect(style.tableBody, theme.textTheme.body1);
+ });
+
testWidgets('merge', (WidgetTester tester) async {
final ThemeData theme = ThemeData.light().copyWith(textTheme: textTheme);
final MarkdownStyleSheet style1 = MarkdownStyleSheet.fromTheme(theme);
@@ -687,7 +839,7 @@
)));
final RichText widget = tester.widget(find.byType(RichText));
- expect(widget.text.style.color, CupertinoColors.link);
+ expect(widget.text.style.color, CupertinoColors.link.color);
});
});
@@ -706,39 +858,39 @@
});
testWidgets('should apply text alignments from stylesheet',
- (WidgetTester tester) async {
- final ThemeData theme = ThemeData.light().copyWith(textTheme: textTheme);
- final MarkdownStyleSheet style1 =
- MarkdownStyleSheet.fromTheme(theme).copyWith(
- h1Align: WrapAlignment.center,
- h3Align: WrapAlignment.end,
- );
+ (WidgetTester tester) async {
+ final ThemeData theme = ThemeData.light().copyWith(textTheme: textTheme);
+ final MarkdownStyleSheet style1 =
+ MarkdownStyleSheet.fromTheme(theme).copyWith(
+ h1Align: WrapAlignment.center,
+ h3Align: WrapAlignment.end,
+ );
- const String data = '# h1\n ## h2';
- await tester.pumpWidget(_boilerplate(MarkdownBody(
- data: data,
- styleSheet: style1,
- )));
+ const String data = '# h1\n ## h2';
+ await tester.pumpWidget(_boilerplate(MarkdownBody(
+ data: data,
+ styleSheet: style1,
+ )));
- final Iterable<Widget> widgets = tester.allWidgets;
- _expectWidgetTypes(widgets, <Type>[
- Directionality,
- MarkdownBody,
- Column,
- Column,
- Wrap,
- RichText,
- SizedBox,
- Column,
- Wrap,
- RichText,
- ]);
+ final Iterable<Widget> widgets = tester.allWidgets;
+ _expectWidgetTypes(widgets, <Type>[
+ Directionality,
+ MarkdownBody,
+ Column,
+ Column,
+ Wrap,
+ RichText,
+ SizedBox,
+ Column,
+ Wrap,
+ RichText,
+ ]);
- expect((widgets.firstWhere((w) => w is RichText) as RichText).textAlign,
- TextAlign.center);
- expect((widgets.last as RichText).textAlign, TextAlign.start,
- reason: "default alignment if none is set in stylesheet");
- });
+ expect((widgets.firstWhere((w) => w is RichText) as RichText).textAlign,
+ TextAlign.center);
+ expect((widgets.last as RichText).textAlign, TextAlign.start,
+ reason: "default alignment if none is set in stylesheet");
+ });
testWidgets('should align formatted text', (WidgetTester tester) async {
final ThemeData theme = ThemeData.light().copyWith(textTheme: textTheme);
