diff --git a/packages/zefyr/lib/src/widgets/code.dart b/packages/zefyr/lib/src/widgets/code.dart index 1c5c60500..823a1ef94 100644 --- a/packages/zefyr/lib/src/widgets/code.dart +++ b/packages/zefyr/lib/src/widgets/code.dart @@ -28,7 +28,7 @@ class ZefyrCode extends StatelessWidget { child: new Container( // TODO: make decorations configurable decoration: BoxDecoration( - color: Colors.blueGrey.shade50, + color: theme.blockTheme.code.backgroundColor, borderRadius: BorderRadius.circular(3.0), ), padding: const EdgeInsets.all(16.0), diff --git a/packages/zefyr/lib/src/widgets/horizontal_rule.dart b/packages/zefyr/lib/src/widgets/horizontal_rule.dart index d9011f0ea..d948b1e36 100644 --- a/packages/zefyr/lib/src/widgets/horizontal_rule.dart +++ b/packages/zefyr/lib/src/widgets/horizontal_rule.dart @@ -9,6 +9,7 @@ import 'package:flutter/widgets.dart'; import 'package:notus/notus.dart'; import 'editable_box.dart'; +import 'theme.dart'; class ZefyrHorizontalRule extends LeafRenderObjectWidget { ZefyrHorizontalRule({@required this.node}) : assert(node != null); @@ -17,7 +18,7 @@ class ZefyrHorizontalRule extends LeafRenderObjectWidget { @override RenderHorizontalRule createRenderObject(BuildContext context) { - return new RenderHorizontalRule(node: node); + return new RenderHorizontalRule(node: node, context: context); } @override @@ -34,7 +35,8 @@ class RenderHorizontalRule extends RenderEditableBox { RenderHorizontalRule({ @required EmbedNode node, - }) : _node = node; + @required BuildContext context, + }) : _node = node, _context = context; @override EmbedNode get node => _node; @@ -45,6 +47,8 @@ class RenderHorizontalRule extends RenderEditableBox { markNeedsPaint(); } + BuildContext _context; + @override double get preferredLineHeight => size.height; @@ -77,7 +81,7 @@ class RenderHorizontalRule extends RenderEditableBox { @override void paint(PaintingContext context, Offset offset) { final rect = new Rect.fromLTWH(0.0, 0.0, size.width, _kThickness); - final paint = new ui.Paint()..color = Colors.grey.shade200; + final paint = new ui.Paint()..color = ZefyrTheme.of(_context).horizontalRuleColor; context.canvas.drawRect(rect.shift(offset), paint); } diff --git a/packages/zefyr/lib/src/widgets/quote.dart b/packages/zefyr/lib/src/widgets/quote.dart index a9eacd138..4975eb763 100644 --- a/packages/zefyr/lib/src/widgets/quote.dart +++ b/packages/zefyr/lib/src/widgets/quote.dart @@ -19,7 +19,7 @@ class ZefyrQuote extends StatelessWidget { final style = theme.blockTheme.quote.textStyle; List items = []; for (var line in node.children) { - items.add(_buildLine(line, style, theme.indentSize)); + items.add(_buildLine(line, style, theme)); } return Padding( @@ -31,7 +31,7 @@ class ZefyrQuote extends StatelessWidget { ); } - Widget _buildLine(Node node, TextStyle blockStyle, double indentSize) { + Widget _buildLine(Node node, TextStyle blockStyle, ZefyrThemeData theme) { LineNode line = node; Widget content; @@ -45,10 +45,10 @@ class ZefyrQuote extends StatelessWidget { return Container( decoration: BoxDecoration( border: Border( - left: BorderSide(width: 4.0, color: Colors.grey.shade300), + left: BorderSide(width: 4.0, color: theme.blockTheme.quote.backgroundColor), ), ), - padding: EdgeInsets.only(left: indentSize), + padding: EdgeInsets.only(left: theme.indentSize), child: row, ); } diff --git a/packages/zefyr/lib/src/widgets/theme.dart b/packages/zefyr/lib/src/widgets/theme.dart index 0f7c11602..c7e1a894a 100644 --- a/packages/zefyr/lib/src/widgets/theme.dart +++ b/packages/zefyr/lib/src/widgets/theme.dart @@ -59,6 +59,7 @@ class ZefyrThemeData { final StyleTheme paragraphTheme; final HeadingTheme headingTheme; final BlockTheme blockTheme; + final Color horizontalRuleColor; final Color selectionColor; final Color cursorColor; @@ -88,6 +89,7 @@ class ZefyrThemeData { new StyleTheme(textStyle: paragraphStyle, padding: padding), headingTheme: new HeadingTheme.fallback(), blockTheme: new BlockTheme.fallback(), + horizontalRuleColor: Colors.grey.shade200, selectionColor: Colors.lightBlueAccent.shade100, cursorColor: Colors.black, indentSize: 16.0, @@ -102,6 +104,7 @@ class ZefyrThemeData { this.paragraphTheme, this.headingTheme, this.blockTheme, + this.horizontalRuleColor, this.selectionColor, this.cursorColor, this.indentSize, @@ -116,6 +119,7 @@ class ZefyrThemeData { StyleTheme paragraphTheme, HeadingTheme headingTheme, BlockTheme blockTheme, + Color horizontalRuleColor, Color selectionColor, Color cursorColor, double indentSize, @@ -128,6 +132,7 @@ class ZefyrThemeData { paragraphTheme: paragraphTheme ?? this.paragraphTheme, headingTheme: headingTheme ?? this.headingTheme, blockTheme: blockTheme ?? this.blockTheme, + horizontalRuleColor: horizontalRuleColor?? this.horizontalRuleColor, selectionColor: selectionColor ?? this.selectionColor, cursorColor: cursorColor ?? this.cursorColor, indentSize: indentSize ?? this.indentSize, @@ -143,6 +148,7 @@ class ZefyrThemeData { paragraphTheme: other.paragraphTheme, headingTheme: other.headingTheme, blockTheme: other.blockTheme, + horizontalRuleColor: other.horizontalRuleColor, selectionColor: other.selectionColor, cursorColor: other.cursorColor, indentSize: other.indentSize, @@ -232,6 +238,7 @@ class BlockTheme { quote: new StyleTheme( textStyle: new TextStyle(color: Colors.grey.shade700), padding: padding, + backgroundColor: Colors.grey.shade300, ), code: new StyleTheme( textStyle: new TextStyle( @@ -241,6 +248,7 @@ class BlockTheme { height: 1.25, ), padding: padding, + backgroundColor: Colors.blueGrey.shade50, ), ); } @@ -257,10 +265,14 @@ class StyleTheme { /// Padding to apply around lines of text. final EdgeInsets padding; + /// Background color of this theme + final Color backgroundColor; + /// Creates a new [StyleTheme]. StyleTheme({ this.textStyle, this.padding, + this.backgroundColor, }); }