fix: correct components using dark theme (callstack#203)

Author: lukewalczak

example/src/ToolbarExample.js

@@ -9,10 +9,13 @@ import {
   ToolbarContent,
   ToolbarAction,
   ToolbarBackAction,
+  withTheme,
 } from 'react-native-paper';
+import type { Theme } from 'react-native-paper/types';
 
 type Props = {
   navigation: any,
+  theme: Theme,
 };
 
 type State = {
@@ -24,7 +27,7 @@ type State = {
 
 const MORE_ICON = Platform.OS === 'ios' ? 'more-horiz' : 'more-vert';
 
-export default class ToolbarExample extends React.Component<Props, State> {
+class ToolbarExample extends React.Component<Props, State> {
   static title = 'Toolbar';
   static navigationOptions = ({ navigation }) => {
     return {
@@ -65,8 +68,16 @@ export default class ToolbarExample extends React.Component<Props, State> {
       showMoreIcon,
       showSubtitle,
     } = this.state;
+    const { theme: { colors: { background } } } = this.props;
     return (
-      <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: background,
+          },
+        ]}
+      >
         <View style={styles.content}>
           <Button
             accent
@@ -135,3 +146,5 @@ const styles = StyleSheet.create({
     padding: 4,
   },
 });
+
+export default withTheme(ToolbarExample);

src/components/Button.js

@@ -123,19 +123,26 @@ class Button extends React.Component<Props, State> {
       theme,
     } = this.props;
     const { colors, roundness, dark: isDarkTheme } = theme;
+    const isDarkActive = this.props.dark || this.props.theme.dark;
     const fontFamily = theme.fonts.medium;
     let backgroundColor, textColor, isDark;
     if (raised) {
       if (disabled) {
-        backgroundColor = 'rgba(0, 0, 0, .12)';
+        isDarkActive
+          ? (backgroundColor = color(white)
+              .alpha(0.12)
+              .rgbaString())
+          : (backgroundColor = color(black)
+              .alpha(0.12)
+              .rgbaString());
       } else {
         if (buttonColor) {
           backgroundColor = buttonColor;
         } else {
           if (primary) {
             backgroundColor = colors.primary;
           } else {
-            backgroundColor = dark ? black : white;
+            backgroundColor = isDarkActive ? 'rgba(58, 55, 55, .9)' : white;
           }
         }
       }
@@ -154,19 +161,23 @@ class Button extends React.Component<Props, State> {
 
     if (disabled) {
       textColor = isDarkTheme
-        ? 'rgba(255, 255, 255, .26)'
-        : 'rgba(0, 0, 0, .26)';
+        ? color(white)
+            .alpha(0.3)
+            .rgbaString()
+        : color(black)
+            .alpha(0.26)
+            .rgbaString();
     } else {
       if (raised) {
-        textColor = isDark ? white : black;
+        textColor = isDarkActive ? white : black;
       } else {
         if (buttonColor) {
           textColor = buttonColor;
         } else {
           if (primary) {
             textColor = colors.primary;
           } else {
-            textColor = isDark ? white : black;
+            textColor = isDark || isDarkTheme ? white : black;
           }
         }
       }

src/components/Divider.js

@@ -1,14 +1,19 @@
 /* @flow */
 
 import * as React from 'react';
+import color from 'color';
 import { StyleSheet, View } from 'react-native';
+import withTheme from '../core/withTheme';
+import type { Theme } from '../types';
+import { black, white } from '../styles/colors';
 
 type Props = {
   /**
    *  Whether divider has a left inset
    */
   inset?: boolean,
   style?: any,
+  theme: Theme,
 };
 
 /**
@@ -27,20 +32,36 @@ type Props = {
  * ```
  */
 const Divider = (props: Props) => {
-  const { inset, style } = props;
+  const { inset, style, theme } = props;
+  const { dark: isDarkTheme } = theme;
   return (
-    <View {...props} style={[styles.divider, inset && styles.inset, style]} />
+    <View
+      {...props}
+      style={[
+        isDarkTheme ? styles.dividerDarkTheme : styles.dividerDeafultTheme,
+        inset && styles.inset,
+        style,
+      ]}
+    />
   );
 };
 
 const styles = StyleSheet.create({
-  divider: {
-    backgroundColor: 'rgba(0, 0, 0, .12)',
+  dividerDeafultTheme: {
+    backgroundColor: color(black)
+      .alpha(0.12)
+      .rgbaString(),
+    height: StyleSheet.hairlineWidth,
+  },
+  dividerDarkTheme: {
+    backgroundColor: color(white)
+      .alpha(0.12)
+      .rgbaString(),
     height: StyleSheet.hairlineWidth,
   },
   inset: {
     marginLeft: 72,
   },
 });
 
-export default Divider;
+export default withTheme(Divider);

src/components/Switch.js

@@ -1,7 +1,7 @@
 /* @flow */
-
 import * as React from 'react';
-import { grey400, grey50 } from '../styles/colors';
+
+import { grey400, grey800, grey50, white, black } from '../styles/colors';
 import { View, Switch, Platform } from 'react-native';
 import withTheme from '../core/withTheme';
 import setColor from 'color';
@@ -63,25 +63,34 @@ class SwitchRow extends React.Component<Props> {
       ...props
     } = this.props;
 
+    const { dark: isDarkTheme } = theme;
+
     const checkedColor = color || theme.colors.accent;
 
     const trackTintColor =
       Platform.OS === 'ios'
         ? checkedColor
         : disabled
-          ? setColor(grey400)
-              .alpha(0.38)
-              .rgb()
-              .string()
+          ? isDarkTheme
+            ? setColor(white)
+                .alpha(0.1)
+                .rgb()
+                .string()
+            : setColor(black)
+                .alpha(0.12)
+                .rgb()
+                .string()
           : setColor(checkedColor)
-              .alpha(0.38)
+              .alpha(0.5)
               .rgb()
               .string();
 
     const trackThumbTintColor =
       Platform.OS === 'ios'
         ? undefined
-        : disabled ? grey400 : value ? checkedColor : grey50;
+        : disabled
+          ? isDarkTheme ? grey800 : grey400
+          : value ? checkedColor : isDarkTheme ? grey400 : grey50;
 
     return (
       <View>