Fix a few unthemable elements

Used palette.textColor to replace hard-coded blacks, should work for both dark and light themes
mui · Jan 12, 2016 · 511ffaf · 511ffaf
1 parent d359ad5
commit 511ffaf
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/lists/list.jsx b/src/lists/list.jsx
@@ -82,6 +82,10 @@ const List = React.createClass({
     this.setState({muiTheme: newMuiTheme});
   },
 
+  getTheme() {
+    return this.state.muiTheme.list;
+  },
+
   render() {
     const {
       children,
@@ -101,7 +105,7 @@ const List = React.createClass({
       },
 
       subheader: {
-        color: Typography.textLightBlack,
+        color: this.getTheme().subheaderTextColor,
         fontSize: 14,
         fontWeight: Typography.fontWeightMedium,
         lineHeight: '48px',

diff --git a/src/styles/getMuiTheme.js b/src/styles/getMuiTheme.js
@@ -25,7 +25,7 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       height: spacing.desktopKeylineIncrement,
     },
     avatar: {
-      borderColor: 'rgba(0, 0, 0, 0.08)',
+      borderColor: ColorManipulator.fade(palette.textColor, 0.08),
     },
     badge: {
       color: palette.alternateTextColor,
@@ -88,6 +88,9 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       width: spacing.desktopKeylineIncrement * 4,
       color: palette.canvasColor,
     },
+    list: {
+      subheaderTextColor: ColorManipulator.fade(palette.textColor, 0.54)
+    },
     listItem: {
       nestedLevelDepth: 18,
     },
@@ -98,7 +101,7 @@ export default function getMuiTheme(baseTheme, muiTheme) {
     menuItem: {
       dataHeight: 32,
       height: 48,
-      hoverColor: 'rgba(0, 0, 0, .035)',
+      hoverColor: ColorManipulator.fade(palette.textColor, 0.035),
       padding: spacing.desktopGutter,
       selectedTextColor: palette.accent1Color,
     },
@@ -204,9 +207,9 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       backgroundColor: ColorManipulator.darken(palette.accent2Color, 0.05),
       height: 56,
       titleFontSize: 20,
-      iconColor: 'rgba(0, 0, 0, .40)',
-      separatorColor: 'rgba(0, 0, 0, .175)',
-      menuHoverColor: 'rgba(0, 0, 0, .10)',
+      iconColor: ColorManipulator.fade(palette.textColor, 0.4),
+      separatorColor: ColorManipulator.fade(palette.textColor, 0.175),
+      menuHoverColor: ColorManipulator.fade(palette.textColor, 0.1),
     },
     tabs: {
       backgroundColor: palette.primary1Color,