Refactoring to support dark theme better R=abarth@chromium.org Review URL: https://codereview.chromium.org/1218153005.
diff --git a/sky/sdk/BUILD.gn b/sky/sdk/BUILD.gn index e56dd8a..81e378d 100644 --- a/sky/sdk/BUILD.gn +++ b/sky/sdk/BUILD.gn
@@ -44,7 +44,6 @@ "lib/rendering/stack.dart", "lib/sky_tool", "lib/theme/colors.dart", - "lib/theme/edges.dart", "lib/theme/shadows.dart", "lib/theme/theme_data.dart", "lib/theme/typography.dart",
diff --git a/sky/sdk/example/stocks/lib/main.dart b/sky/sdk/example/stocks/lib/main.dart index 8cf2f81..b358f72 100644 --- a/sky/sdk/example/stocks/lib/main.dart +++ b/sky/sdk/example/stocks/lib/main.dart
@@ -68,15 +68,15 @@ ThemeData theme; if (optimismSetting == StockMode.optimistic) { - theme = new ThemeData.light( - primary: colors.Purple, - accent: colors.RedAccent, - darkToolbar: true + theme = new ThemeData( + brightness: ThemeBrightness.light, + primarySwatch: colors.Purple, + accentColor: colors.RedAccent[200] ); } else { - theme = new ThemeData.dark( - primary: colors.Red, - accent: colors.PurpleAccent + theme = new ThemeData( + brightness: ThemeBrightness.dark, + accentColor: colors.RedAccent[200] ); }
diff --git a/sky/sdk/example/stocks/lib/stock_home.dart b/sky/sdk/example/stocks/lib/stock_home.dart index 24a9853..f8b686d 100644 --- a/sky/sdk/example/stocks/lib/stock_home.dart +++ b/sky/sdk/example/stocks/lib/stock_home.dart
@@ -3,7 +3,6 @@ // found in the LICENSE file. import 'package:sky/editing/input.dart'; -import 'package:sky/theme/colors.dart' as colors; import 'package:sky/widgets/basic.dart'; import 'package:sky/widgets/drawer.dart'; import 'package:sky/widgets/drawer_header.dart'; @@ -18,6 +17,7 @@ import 'package:sky/widgets/radio.dart'; import 'package:sky/widgets/scaffold.dart'; import 'package:sky/widgets/tabs.dart'; +import 'package:sky/widgets/theme.dart'; import 'package:sky/widgets/tool_bar.dart'; import 'package:sky/widgets/widget.dart'; @@ -219,7 +219,7 @@ focused: true, placeholder: 'Search stocks', onChanged: _handleSearchQueryChanged), - backgroundColor: colors.Grey[50] + backgroundColor: Theme.of(this).canvasColor ); }
diff --git a/sky/sdk/example/stocks/lib/stock_settings.dart b/sky/sdk/example/stocks/lib/stock_settings.dart index 04be1ac..127373c 100644 --- a/sky/sdk/example/stocks/lib/stock_settings.dart +++ b/sky/sdk/example/stocks/lib/stock_settings.dart
@@ -2,13 +2,13 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import 'package:sky/theme/colors.dart' as colors; import 'package:sky/widgets/basic.dart'; import 'package:sky/widgets/checkbox.dart'; import 'package:sky/widgets/switch.dart'; import 'package:sky/widgets/flat_button.dart'; import 'package:sky/widgets/dialog.dart'; import 'package:sky/widgets/icon_button.dart'; +import 'package:sky/widgets/material.dart'; import 'package:sky/widgets/menu_item.dart'; import 'package:sky/widgets/navigator.dart'; import 'package:sky/widgets/scaffold.dart'; @@ -87,27 +87,29 @@ Widget buildSettingsPane() { // TODO(ianh): Once we have the gesture API hooked up, fix https://github.com/domokit/mojo/issues/281 // (whereby tapping the widgets below causes both the widget and the menu item to fire their callbacks) - return new Container( - padding: const EdgeDims.symmetric(vertical: 20.0), - decoration: new BoxDecoration(backgroundColor: colors.Grey[50]), - child: new Block([ - new MenuItem( - icon: 'action/thumb_up', - onPressed: () => _confirmOptimismChange(), - children: [ - new Flexible(child: new Text('Everything is awesome')), - new Checkbox(value: optimism == StockMode.optimistic, onChanged: _handleOptimismChanged) - ] - ), - new MenuItem( - icon: 'action/backup', - onPressed: () { _handleBackupChanged(!(backup == BackupMode.enabled)); }, - children: [ - new Flexible(child: new Text('Back up stock list to the cloud')), - new Switch(value: backup == BackupMode.enabled, onChanged: _handleBackupChanged) - ] - ), - ]) + return new Material( + type: MaterialType.canvas, + child: new Container( + padding: const EdgeDims.symmetric(vertical: 20.0), + child: new Block([ + new MenuItem( + icon: 'action/thumb_up', + onPressed: () => _confirmOptimismChange(), + children: [ + new Flexible(child: new Text('Everything is awesome')), + new Checkbox(value: optimism == StockMode.optimistic, onChanged: _handleOptimismChanged) + ] + ), + new MenuItem( + icon: 'action/backup', + onPressed: () { _handleBackupChanged(!(backup == BackupMode.enabled)); }, + children: [ + new Flexible(child: new Text('Back up stock list to the cloud')), + new Switch(value: backup == BackupMode.enabled, onChanged: _handleBackupChanged) + ] + ), + ]) + ) ); }
diff --git a/sky/sdk/example/widgets/sector.dart b/sky/sdk/example/widgets/sector.dart index f1e83a2..0f52e16 100644 --- a/sky/sdk/example/widgets/sector.dart +++ b/sky/sdk/example/widgets/sector.dart
@@ -74,13 +74,12 @@ Widget build() { return new Theme( - data: new ThemeData.light(primary: colors.Blue, darkToolbar: true), + data: new ThemeData.light(), child: new Scaffold( toolbar: new ToolBar( center: new Text('Sector Layout in a Widget Tree')), body: new Material( - color: colors.Grey[50], - edge: MaterialEdge.canvas, + type: MaterialType.canvas, child: new Flex([ new Container( padding: new EdgeDims.symmetric(horizontal: 8.0, vertical: 25.0),
diff --git a/sky/sdk/example/widgets/styled_text.dart b/sky/sdk/example/widgets/styled_text.dart index eddd81e..c2d1592 100644 --- a/sky/sdk/example/widgets/styled_text.dart +++ b/sky/sdk/example/widgets/styled_text.dart
@@ -106,7 +106,7 @@ ); return new Theme( - data: new ThemeData.light(primary: colors.Blue, darkToolbar: true), + data: new ThemeData.light(), child: new Scaffold( body: new Material( color: colors.Grey[50],
diff --git a/sky/sdk/example/widgets/tabs.dart b/sky/sdk/example/widgets/tabs.dart index 872a3e7..93d259c 100644 --- a/sky/sdk/example/widgets/tabs.dart +++ b/sky/sdk/example/widgets/tabs.dart
@@ -76,7 +76,7 @@ return new Container( child: new Card(child: tabNavigator), padding: const EdgeDims.all(12.0), - decoration: new BoxDecoration(backgroundColor: Theme.of(this).primary[50]) + decoration: new BoxDecoration(backgroundColor: Theme.of(this).primarySwatch[50]) ); }
diff --git a/sky/sdk/home.dart b/sky/sdk/home.dart index 1968484..1addba1 100644 --- a/sky/sdk/home.dart +++ b/sky/sdk/home.dart
@@ -8,7 +8,6 @@ import 'package:sky/mojo/shell.dart' as shell; import 'package:sky/painting/box_painter.dart'; import 'package:sky/theme/colors.dart' as colors; -import 'package:sky/theme/edges.dart'; import 'package:sky/theme/typography.dart' as typography; import 'package:sky/widgets/basic.dart'; import 'package:sky/widgets/card.dart'; @@ -170,14 +169,14 @@ class SkyHome extends App { Widget build() { return new Theme( - data: new ThemeData.dark( - primary: colors.Teal, - accent: colors.Orange + data: new ThemeData( + brightness: ThemeBrightness.dark, + primarySwatch: colors.Teal ), child: new Scaffold( toolbar: new ToolBar(center: new Text('Sky Demos')), body: new Material( - edge: MaterialEdge.canvas, + type: MaterialType.canvas, child: new DemoList() ) )
diff --git a/sky/sdk/lib/editing/input.dart b/sky/sdk/lib/editing/input.dart index f86e993..ad060ad 100644 --- a/sky/sdk/lib/editing/input.dart +++ b/sky/sdk/lib/editing/input.dart
@@ -68,15 +68,23 @@ textChildren.add(child); } + ThemeData themeData = Theme.of(this); + Color focusHighlightColor = themeData.accentColor; + Color cursorColor = themeData.accentColor; + if (themeData.primarySwatch != null) { + cursorColor = Theme.of(this).primarySwatch[200]; + focusHighlightColor = focused ? themeData.primarySwatch[400] : themeData.primarySwatch[200]; + } + textChildren.add(new EditableText( value: _editableValue, focused: focused, style: textStyle, - cursorColor: Theme.of(this).primary[200] + cursorColor: cursorColor )); Border focusHighlight = new Border(bottom: new BorderSide( - color: focused ? Theme.of(this).primary[400] : Theme.of(this).primary[200], + color: focusHighlightColor, width: focused ? 2.0 : 1.0 ));
diff --git a/sky/sdk/lib/theme/colors.dart b/sky/sdk/lib/theme/colors.dart index efa9051..4c7e2ee 100644 --- a/sky/sdk/lib/theme/colors.dart +++ b/sky/sdk/lib/theme/colors.dart
@@ -370,3 +370,15 @@ 800: const Color(0xFF37474F), 900: const Color(0xFF263238), }; + +const List<Map<int, Color>> DarkColors = const [ + Red, + Pink, + Purple, + DeepPurple, + Indigo, + Blue, + Teal, + DeepOrange, + Brown +]; \ No newline at end of file
diff --git a/sky/sdk/lib/theme/theme_data.dart b/sky/sdk/lib/theme/theme_data.dart index fe6d381..cfefa33 100644 --- a/sky/sdk/lib/theme/theme_data.dart +++ b/sky/sdk/lib/theme/theme_data.dart
@@ -11,29 +11,67 @@ class ThemeData { - ThemeData.light({ - this.primary, - this.accent, - bool darkToolbar: false }) - : brightness = ThemeBrightness.light, - toolbarText = darkToolbar ? typography.white : typography.black, - text = typography.black; + ThemeData({ + ThemeBrightness brightness, + Map<int, Color> primarySwatch, + Color accentColor, + Color floatingActionButtonColor, + typography.TextTheme text, + typography.TextTheme toolbarText }) + : this.brightness = brightness, + this.primarySwatch = primarySwatch, + canvasColor = brightness == ThemeBrightness.dark ? colors.Grey[850] : colors.Grey[50], + cardColor = brightness == ThemeBrightness.dark ? colors.Grey[800] : colors.White, + text = brightness == ThemeBrightness.dark ? typography.white : typography.black { + assert(brightness != null); - ThemeData.dark({ this.primary, this.accent }) - : brightness = ThemeBrightness.dark, - toolbarText = typography.white, - text = typography.white; + if (primarySwatch == null) { + _primaryColor = brightness == ThemeBrightness.dark ? colors.Grey[900] : colors.Grey[100]; + } else { + _primaryColor = primarySwatch[500]; + } - ThemeData.fallback() - : brightness = ThemeBrightness.light, - primary = colors.Indigo, - accent = colors.PinkAccent, - toolbarText = typography.white, - text = typography.black; + if (accentColor == null) { + _accentColor = primarySwatch == null ? colors.Blue[500] : primarySwatch[500]; + } else { + _accentColor = accentColor; + } + + if (floatingActionButtonColor == null) { + _floatingActionButtonColor = accentColor == null ? colors.PinkAccent[200] : accentColor; + } else { + _floatingActionButtonColor = floatingActionButtonColor; + } + + if (toolbarText == null) { + if (colors.DarkColors.contains(primarySwatch) || _primaryColor == colors.Grey[900]) + _toolbarText = typography.white; + else + _toolbarText = typography.black; + } else { + _toolbarText = toolbarText; + } + } + + factory ThemeData.light() => new ThemeData(primarySwatch: colors.Blue, brightness: ThemeBrightness.light); + factory ThemeData.dark() => new ThemeData(brightness: ThemeBrightness.dark); + factory ThemeData.fallback() => new ThemeData.light(); final ThemeBrightness brightness; - final Map<int, Color> primary; - final Map<int, Color> accent; + final Map<int, Color> primarySwatch; + final Color canvasColor; + final Color cardColor; final typography.TextTheme text; - final typography.TextTheme toolbarText; + + Color _primaryColor; + Color get primaryColor => _primaryColor; + + Color _accentColor; + Color get accentColor => _accentColor; + + Color _floatingActionButtonColor; + Color get floatingActionButtonColor => _floatingActionButtonColor; + + typography.TextTheme _toolbarText; + typography.TextTheme get toolbarText => _toolbarText; }
diff --git a/sky/sdk/lib/widgets/card.dart b/sky/sdk/lib/widgets/card.dart index 6c37376..dca8b55 100644 --- a/sky/sdk/lib/widgets/card.dart +++ b/sky/sdk/lib/widgets/card.dart
@@ -3,7 +3,6 @@ // found in the LICENSE file. import '../theme/colors.dart' as colors; -import '../theme/edges.dart'; import 'basic.dart'; import 'material.dart'; import "theme.dart"; @@ -14,27 +13,16 @@ final Widget child; final Color color; - Color get materialColor { - if (color != null) - return color; - switch (Theme.of(this).brightness) { - case ThemeBrightness.light: - return colors.White; - case ThemeBrightness.dark: - return colors.Grey[800]; - } - } - Widget build() { return new Container( margin: const EdgeDims.all(4.0), child: new Material( - color: materialColor, - edge: MaterialEdge.card, + color: color, + type: MaterialType.card, level: 2, child: new ClipRRect( - xRadius: edges[MaterialEdge.card], - yRadius: edges[MaterialEdge.card], + xRadius: edges[MaterialType.card], + yRadius: edges[MaterialType.card], child: child ) )
diff --git a/sky/sdk/lib/widgets/checkbox.dart b/sky/sdk/lib/widgets/checkbox.dart index 2c80612..524d26d 100644 --- a/sky/sdk/lib/widgets/checkbox.dart +++ b/sky/sdk/lib/widgets/checkbox.dart
@@ -11,7 +11,8 @@ export 'toggleable.dart' show ValueChanged; const double _kMidpoint = 0.5; -const sky.Color _kUncheckedColor = const sky.Color(0x8A000000); +const sky.Color _kLightUncheckedColor = const sky.Color(0x8A000000); +const sky.Color _kDarkUncheckedColor = const sky.Color(0xB2FFFFFF); const double _kEdgeSize = 20.0; const double _kEdgeRadius = 1.0; @@ -26,9 +27,12 @@ Size get size => const Size(_kEdgeSize + 2.0, _kEdgeSize + 2.0); void customPaintCallback(sky.Canvas canvas, Size size) { + ThemeData themeData = Theme.of(this); + Color uncheckedColor = themeData.brightness == ThemeBrightness.light ? _kLightUncheckedColor : _kDarkUncheckedColor; + // Choose a color between grey and the theme color sky.Paint paint = new sky.Paint()..strokeWidth = 2.0 - ..color = _kUncheckedColor; + ..color = uncheckedColor; // The rrect contracts slightly during the animation double inset = 2.0 - (toggleAnimation.value - _kMidpoint).abs() * 2.0; @@ -46,7 +50,7 @@ new sky.Gradient.radial( new Point(_kEdgeSize / 2.0, _kEdgeSize / 2.0), _kEdgeSize * (_kMidpoint - toggleAnimation.value) * 8.0, - [const sky.Color(0x00000000), _kUncheckedColor] + [const sky.Color(0x00000000), uncheckedColor] ) ); canvas.drawRRect(rrect, paint); @@ -57,11 +61,10 @@ // Solid filled rrect paint.setStyle(sky.PaintingStyle.strokeAndFill); - Color themeColor = Theme.of(this).primary[500]; paint.color = new Color.fromARGB((t * 255).floor(), - themeColor.red, - themeColor.green, - themeColor.blue); + themeData.accentColor.red, + themeData.accentColor.green, + themeData.accentColor.blue); canvas.drawRRect(rrect, paint); // White inner check
diff --git a/sky/sdk/lib/widgets/drawer.dart b/sky/sdk/lib/widgets/drawer.dart index 1a577bc..8ff37b6 100644 --- a/sky/sdk/lib/widgets/drawer.dart +++ b/sky/sdk/lib/widgets/drawer.dart
@@ -6,10 +6,10 @@ import '../animation/animation_performance.dart'; import '../animation/curves.dart'; -import '../theme/colors.dart'; import '../theme/shadows.dart'; import 'animated_component.dart'; import 'basic.dart'; +import 'theme.dart'; // TODO(eseidel): Draw width should vary based on device size: // http://www.google.com/design/spec/layout/structure.html#structure-side-nav @@ -128,7 +128,7 @@ Widget content = controller.position.build( new Container( decoration: new BoxDecoration( - backgroundColor: Grey[50], + backgroundColor: Theme.of(this).canvasColor, boxShadow: shadows[level]), width: _kWidth, child: new Block(children)
diff --git a/sky/sdk/lib/widgets/drawer_header.dart b/sky/sdk/lib/widgets/drawer_header.dart index 730055b..6f9b0e8 100644 --- a/sky/sdk/lib/widgets/drawer_header.dart +++ b/sky/sdk/lib/widgets/drawer_header.dart
@@ -2,12 +2,14 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import '../theme/colors.dart'; import '../theme/view_configuration.dart'; import 'basic.dart'; import 'default_text_style.dart'; import 'theme.dart'; +// TODO(jackson): This class should usually render the user's +// preferred banner image rather than a solid background + class DrawerHeader extends Component { DrawerHeader({ String key, this.children }) : super(key: key); @@ -18,7 +20,7 @@ return new Container( height: kStatusBarHeight + kMaterialDrawerHeight, decoration: new BoxDecoration( - backgroundColor: BlueGrey[50], + backgroundColor: Theme.of(this).cardColor, border: const Border( bottom: const BorderSide( color: const Color(0xFFD1D9E1),
diff --git a/sky/sdk/lib/widgets/floating_action_button.dart b/sky/sdk/lib/widgets/floating_action_button.dart index 78f7a77..6c9eb86 100644 --- a/sky/sdk/lib/widgets/floating_action_button.dart +++ b/sky/sdk/lib/widgets/floating_action_button.dart
@@ -31,8 +31,8 @@ Widget buildContent() { return new Material( - color: Theme.of(this).accent[200], - edge: MaterialEdge.circle, + color: Theme.of(this).floatingActionButtonColor, + type: MaterialType.circle, level: highlight ? 3 : 2, child: new ClipOval( child: new Listener(
diff --git a/sky/sdk/lib/widgets/material.dart b/sky/sdk/lib/widgets/material.dart index 44b6864..444434f 100644 --- a/sky/sdk/lib/widgets/material.dart +++ b/sky/sdk/lib/widgets/material.dart
@@ -4,14 +4,20 @@ import '../animation/animated_value.dart'; import '../painting/box_painter.dart'; -import '../theme/edges.dart'; import '../theme/shadows.dart'; import 'animated_component.dart'; import 'basic.dart'; import 'default_text_style.dart'; import 'theme.dart'; -export '../theme/edges.dart' show MaterialEdge; +enum MaterialType { canvas, card, circle, button } + +const Map<MaterialType, double> edges = const { + MaterialType.canvas: null, + MaterialType.card: 2.0, + MaterialType.circle: null, + MaterialType.button: 2.0, +}; const double _kAnimateShadowDurationMS = 100.0; @@ -34,7 +40,7 @@ Material({ String key, this.child, - this.edge: MaterialEdge.card, + this.type: MaterialType.card, int level: 0, this.color }) : super(key: key) { @@ -43,13 +49,13 @@ } Widget child; - MaterialEdge edge; + MaterialType type; AnimatedValue level; Color color; void syncFields(Material source) { child = source.child; - edge = source.edge; + type = source.type; // TODO(mpcomplete): duration is wrong, because the current level may be // anything. We really want |rate|. if (level.value != source.level.value) @@ -58,15 +64,28 @@ super.syncFields(source); } + Color get backgroundColor { + if (color != null) + return color; + switch(type) { + case MaterialType.canvas: + return Theme.of(this).canvasColor; + case MaterialType.card: + return Theme.of(this).cardColor; + default: + return null; + } + } + // TODO(mpcomplete): make this animate color changes. Widget build() { return new Container( decoration: new BoxDecoration( boxShadow: _computeShadow(level.value), - borderRadius: edges[edge], - backgroundColor: color, - shape: edge == MaterialEdge.circle ? Shape.circle : Shape.rectangle + borderRadius: edges[type], + backgroundColor: backgroundColor, + shape: type == MaterialType.circle ? Shape.circle : Shape.rectangle ), child: new DefaultTextStyle(style: Theme.of(this).text.body1, child: child) );
diff --git a/sky/sdk/lib/widgets/material_button.dart b/sky/sdk/lib/widgets/material_button.dart index f1513e5..e6a866e 100644 --- a/sky/sdk/lib/widgets/material_button.dart +++ b/sky/sdk/lib/widgets/material_button.dart
@@ -42,6 +42,7 @@ constraints: new BoxConstraints(minWidth: 88.0), margin: new EdgeDims.all(8.0), child: new Material( + type: MaterialType.button, child: enabled ? new InkWell(child: contents) : contents, level: level, color: color
diff --git a/sky/sdk/lib/widgets/menu_item.dart b/sky/sdk/lib/widgets/menu_item.dart index 6f24377..94a17a8 100644 --- a/sky/sdk/lib/widgets/menu_item.dart +++ b/sky/sdk/lib/widgets/menu_item.dart
@@ -43,7 +43,7 @@ TextStyle get textStyle { TextStyle result = Theme.of(this).text.body2; if (highlight) - result = result.copyWith(color: Theme.of(this).primary[500]); + result = result.copyWith(color: Theme.of(this).primaryColor); return result; }
diff --git a/sky/sdk/lib/widgets/radio.dart b/sky/sdk/lib/widgets/radio.dart index eb82dfd..32f0c1c 100644 --- a/sky/sdk/lib/widgets/radio.dart +++ b/sky/sdk/lib/widgets/radio.dart
@@ -5,9 +5,12 @@ import 'dart:sky' as sky; import '../rendering/object.dart'; -import '../theme/colors.dart' as colors; import 'basic.dart'; import 'button_base.dart'; +import 'theme.dart'; + +const sky.Color _kLightOffColor = const sky.Color(0x8A000000); +const sky.Color _kDarkOffColor = const sky.Color(0xB2FFFFFF); typedef void ValueChanged(value); @@ -31,9 +34,14 @@ super.syncFields(source); } + Color get color { + ThemeData themeData = Theme.of(this); + if (value == groupValue) + return themeData.accentColor; + return themeData.brightness == ThemeBrightness.light ? _kLightOffColor : _kDarkOffColor; + } + Widget buildContent() { - // TODO(jackson): This should change colors with the theme - Color color = highlight ? colors.Purple[500] : const Color(0x8A000000); const double kDiameter = 16.0; const double kOuterRadius = kDiameter / 2; const double kInnerRadius = 5.0;
diff --git a/sky/sdk/lib/widgets/raised_button.dart b/sky/sdk/lib/widgets/raised_button.dart index 2ff1903..40c7adb 100644 --- a/sky/sdk/lib/widgets/raised_button.dart +++ b/sky/sdk/lib/widgets/raised_button.dart
@@ -30,9 +30,9 @@ break; case ThemeBrightness.dark: if (highlight) - return Theme.of(this).primary[700]; + return Theme.of(this).primarySwatch[700]; else - return Theme.of(this).primary[600]; + return Theme.of(this).primarySwatch[600]; break; } } else {
diff --git a/sky/sdk/lib/widgets/scrollable.dart b/sky/sdk/lib/widgets/scrollable.dart index 3e9c924..a6c4023 100644 --- a/sky/sdk/lib/widgets/scrollable.dart +++ b/sky/sdk/lib/widgets/scrollable.dart
@@ -8,12 +8,9 @@ import '../animation/generators.dart'; import '../animation/mechanics.dart'; import '../animation/scroll_behavior.dart'; -import '../theme/colors.dart' as colors; -import '../theme/theme_data.dart'; import '../theme/view_configuration.dart' as config; import 'basic.dart'; import 'material.dart'; -import 'theme.dart'; const double _kMillisecondsPerSecond = 1000.0; @@ -37,17 +34,6 @@ backgroundColor = source.backgroundColor; } - Color get _nonNullBackgroundColor { - if (backgroundColor != null) - return backgroundColor; - switch (Theme.of(this).brightness) { - case ThemeBrightness.light: - return colors.Grey[50]; - case ThemeBrightness.dark: - return colors.Grey[850]; - } - } - double _scrollOffset = 0.0; double get scrollOffset => _scrollOffset; @@ -66,9 +52,9 @@ Widget build() { return new Listener( child: new Material( + type: MaterialType.canvas, child: buildContent(), - edge: MaterialEdge.canvas, - color: _nonNullBackgroundColor + color: backgroundColor ), onPointerDown: _handlePointerDown, onPointerUp: _handlePointerUpOrCancel,
diff --git a/sky/sdk/lib/widgets/switch.dart b/sky/sdk/lib/widgets/switch.dart index 9fb87da..23e4ce5 100644 --- a/sky/sdk/lib/widgets/switch.dart +++ b/sky/sdk/lib/widgets/switch.dart
@@ -37,7 +37,7 @@ sky.Color thumbColor = _kThumbOffColor; sky.Color trackColor = _kTrackOffColor; if (value) { - thumbColor = Theme.of(this).primary[500]; + thumbColor = Theme.of(this).accentColor; trackColor = new sky.Color(thumbColor.value & 0x80FFFFFF); }
diff --git a/sky/sdk/lib/widgets/tabs.dart b/sky/sdk/lib/widgets/tabs.dart index f66d0ee..f621ff2 100644 --- a/sky/sdk/lib/widgets/tabs.dart +++ b/sky/sdk/lib/widgets/tabs.dart
@@ -295,8 +295,8 @@ return new TabBarWrapper( children: tabs, selectedIndex: selectedIndex, - backgroundColor: Theme.of(this).primary[500], - indicatorColor: Theme.of(this).accent[200], + backgroundColor: Theme.of(this).primaryColor, + indicatorColor: Theme.of(this).accentColor, textAndIcons: textAndIcons ); }
diff --git a/sky/sdk/lib/widgets/tool_bar.dart b/sky/sdk/lib/widgets/tool_bar.dart index df23030..cdc251f 100644 --- a/sky/sdk/lib/widgets/tool_bar.dart +++ b/sky/sdk/lib/widgets/tool_bar.dart
@@ -54,7 +54,7 @@ ), padding: new EdgeDims.symmetric(horizontal: 8.0), decoration: new BoxDecoration( - backgroundColor: backgroundColor == null ? Theme.of(this).primary[500] : backgroundColor, + backgroundColor: backgroundColor == null ? Theme.of(this).primaryColor : backgroundColor, boxShadow: shadows[2] ) );
diff --git a/sky/tests/examples/tabs-expected.txt b/sky/tests/examples/tabs-expected.txt index e93b9b8..f8b71d6 100644 --- a/sky/tests/examples/tabs-expected.txt +++ b/sky/tests/examples/tabs-expected.txt
@@ -12,14 +12,14 @@ 2 | | | TestPaintingCanvas() constructor: 800.0 x 600.0 2 | | | paintChild RenderTabBar at Point(0.0, 81.0) 2 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | drawRect(Rect.fromLTRB(0.0, 81.0, 800.0, 129.0), Paint(color:Color(0xff3f51b5))) +2 | | | | drawRect(Rect.fromLTRB(0.0, 81.0, 800.0, 129.0), Paint(color:Color(0xff2196f3))) 2 | | | | paintChild RenderInkWell at Point(0.0, 81.0) 2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 2 | | | | | paintChild RenderOpacity at Point(115.33333333333334, 97.0) 2 | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 2 | | | | | | translate(115.33333333333334, 97.0) 2 | | | | | | translate(-115.33333333333334, -97.0) -2 | | | | drawRect(Rect.fromLTRB(0.0, 127.0, 266.6666564941406, 129.0), Paint(color:Color(0xffff4081))) +2 | | | | drawRect(Rect.fromLTRB(0.0, 127.0, 266.6666564941406, 129.0), Paint(color:Color(0xff2196f3))) 2 | | | | paintChild RenderInkWell at Point(266.6666666666667, 81.0) 2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 2 | | | | | paintChild RenderOpacity at Point(377.5, 97.0) @@ -38,7 +38,7 @@ 2 | | | | | | restore 2 | | | paintChild RenderDecoratedBox at Point(0.0, 129.0) 2 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | drawRect(Rect.fromLTRB(0.0, 129.0, 800.0, 600.0), Paint(color:Color(0xffe8eaf6))) +2 | | | | drawRect(Rect.fromLTRB(0.0, 129.0, 800.0, 600.0), Paint(color:Color(0xffe3f2fd))) 2 | | | | paintChild RenderPadding at Point(12.0, 141.0) 2 | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 2 | | | | | paintChild RenderDecoratedBox at Point(16.0, 145.0) @@ -48,14 +48,14 @@ 2 | | | | | | clipRRect() 2 | | | | | | paintChild RenderTabBar at Point(16.0, 145.0) 2 | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | | | | | drawRect(Rect.fromLTRB(16.0, 145.0, 784.0, 193.0), Paint(color:Color(0xff3f51b5))) +2 | | | | | | | drawRect(Rect.fromLTRB(16.0, 145.0, 784.0, 193.0), Paint(color:Color(0xff2196f3))) 2 | | | | | | | paintChild RenderInkWell at Point(16.0, 145.0) 2 | | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 2 | | | | | | | | paintChild RenderOpacity at Point(96.5, 159.0) 2 | | | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 2 | | | | | | | | | translate(96.5, 159.0) 2 | | | | | | | | | translate(-96.5, -159.0) -2 | | | | | | | drawRect(Rect.fromLTRB(16.0, 191.0, 208.0, 193.0), Paint(color:Color(0xffff4081))) +2 | | | | | | | drawRect(Rect.fromLTRB(16.0, 191.0, 208.0, 193.0), Paint(color:Color(0xff2196f3))) 2 | | | | | | | paintChild RenderInkWell at Point(208.0, 145.0) 2 | | | | | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 2 | | | | | | | | paintChild RenderOpacity at Point(287.0, 159.0) @@ -89,7 +89,7 @@ 2 | | | | | | restore 2 | | paintChild RenderDecoratedBox at Point(0.0, 0.0) 2 | | | TestPaintingCanvas() constructor: 800.0 x 600.0 -2 | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 81.0), Paint(color:Color(0xff3f51b5), drawLooper:true)) +2 | | | drawRect(Rect.fromLTRB(0.0, 0.0, 800.0, 81.0), Paint(color:Color(0xff2196f3), drawLooper:true)) 2 | | | paintChild RenderFlex at Point(8.0, 0.0) 2 | | | | TestPaintingCanvas() constructor: 800.0 x 600.0 2 | | | | paintChild RenderConstrainedBox at Point(8.0, 25.0)