diff --git a/example/src/CardExample.js b/example/src/CardExample.js
index 500eaee..79cc3d8 100644
--- a/example/src/CardExample.js
+++ b/example/src/CardExample.js
@@ -17,6 +17,7 @@ class CardExample extends Component {
   static propTypes = {
     theme: PropTypes.object.isRequired,
   };
+
   render() {
     const { theme: { colors: { background } } } = this.props;
     return (
diff --git a/example/src/DialogExample.js b/example/src/DialogExample.js
index 65947fa..252d99f 100644
--- a/example/src/DialogExample.js
+++ b/example/src/DialogExample.js
@@ -1,8 +1,9 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { View, StyleSheet } from 'react-native';
-import { Colors, Button } from 'react-native-paper';
+import { Colors, Button, withTheme } from 'react-native-paper';
 import {
   DialogWithCustomColors,
   DialogWithLoadingIndicator,
@@ -11,8 +12,11 @@ import {
   UndismissableDialog,
 } from './Dialogs';
 
-export default class DialogExample extends Component {
+class DialogExample extends Component {
   static title = 'Dialog';
+  static propTypes = {
+    theme: PropTypes.object.isRequired,
+  };
 
   state = {
     visible1: false,
@@ -35,9 +39,10 @@ export default class DialogExample extends Component {
   _closeDialog5 = () => this.setState({ visible5: false });
 
   render() {
+    const { theme: { colors: { background } } } = this.props;
     const { visible1, visible2, visible3, visible4, visible5 } = this.state;
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, { backgroundColor: background }]}>
         <Button primary onPress={this._openDialog1}>
           Show Dialog with long text
         </Button>
@@ -73,3 +78,5 @@ const styles = StyleSheet.create({
     padding: 16,
   },
 });
+
+export default withTheme(DialogExample);
diff --git a/example/src/Dialogs/DialogWithCustomColors.js b/example/src/Dialogs/DialogWithCustomColors.js
index 266f495..90e611a 100644
--- a/example/src/Dialogs/DialogWithCustomColors.js
+++ b/example/src/Dialogs/DialogWithCustomColors.js
@@ -12,7 +12,7 @@ const DialogWithCustomColors = ({
 }) => (
   <Dialog
     onRequestClose={close}
-    style={{ backgroundColor: Colors.grey800 }}
+    style={{ backgroundColor: Colors.purple900 }}
     visible={visible}
   >
     <Dialog.Title style={{ color: Colors.white }}>Alert</Dialog.Title>
@@ -22,7 +22,7 @@ const DialogWithCustomColors = ({
       </Paragraph>
     </Dialog.Content>
     <Dialog.Actions>
-      <Button color={Colors.teal500} onPress={close}>
+      <Button color={Colors.pink500} onPress={close}>
         OK
       </Button>
     </Dialog.Actions>
diff --git a/example/src/Dialogs/DialogWithRadioBtns.js b/example/src/Dialogs/DialogWithRadioBtns.js
index 8066856..b8629a0 100644
--- a/example/src/Dialogs/DialogWithRadioBtns.js
+++ b/example/src/Dialogs/DialogWithRadioBtns.js
@@ -2,7 +2,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { ScrollView, View, StyleSheet } from 'react-native';
-import { Paragraph, Button, Dialog, RadioButton } from 'react-native-paper';
+import {
+  Paragraph,
+  Button,
+  Dialog,
+  RadioButton,
+  TouchableRipple,
+} from 'react-native-paper';
 
 type Props = {
   visible: boolean,
@@ -31,36 +37,40 @@ export default class extends Component<void, Props, State> {
       <Dialog onRequestClose={close} visible={visible}>
         <Dialog.Title>Choose an option</Dialog.Title>
         <Dialog.ScrollArea style={{ maxHeight: 170, paddingHorizontal: 0 }}>
-          <ScrollView contentContainerStyle={{ paddingHorizontal: 24 }}>
+          <ScrollView>
             <View>
-              <View style={styles.checkBoxRow}>
-                <RadioButton
-                  checked={checked === 0}
-                  onPress={() => this.setState({ checked: 0 })}
-                />
-                <Paragraph style={styles.paragraph}>Option 1</Paragraph>
-              </View>
-              <View style={styles.checkBoxRow}>
-                <RadioButton
-                  checked={checked === 1}
-                  onPress={() => this.setState({ checked: 1 })}
-                />
-                <Paragraph style={styles.paragraph}>Option 2</Paragraph>
-              </View>
-              <View style={styles.checkBoxRow}>
-                <RadioButton
-                  checked={checked === 2}
-                  onPress={() => this.setState({ checked: 2 })}
-                />
-                <Paragraph style={styles.paragraph}>Option 3</Paragraph>
-              </View>
-              <View style={styles.checkBoxRow}>
-                <RadioButton
-                  checked={checked === 3}
-                  onPress={() => this.setState({ checked: 3 })}
-                />
-                <Paragraph style={styles.paragraph}>Option 4</Paragraph>
-              </View>
+              <TouchableRipple onPress={() => this.setState({ checked: 0 })}>
+                <View style={styles.row}>
+                  <Paragraph>Option 1</Paragraph>
+                  <View pointerEvents="none">
+                    <RadioButton value="normal" checked={checked === 0} />
+                  </View>
+                </View>
+              </TouchableRipple>
+              <TouchableRipple onPress={() => this.setState({ checked: 1 })}>
+                <View style={styles.row}>
+                  <Paragraph>Option 2</Paragraph>
+                  <View pointerEvents="none">
+                    <RadioButton value="normal" checked={checked === 1} />
+                  </View>
+                </View>
+              </TouchableRipple>
+              <TouchableRipple onPress={() => this.setState({ checked: 2 })}>
+                <View style={styles.row}>
+                  <Paragraph>Option 3</Paragraph>
+                  <View pointerEvents="none">
+                    <RadioButton value="normal" checked={checked === 2} />
+                  </View>
+                </View>
+              </TouchableRipple>
+              <TouchableRipple onPress={() => this.setState({ checked: 3 })}>
+                <View style={styles.row}>
+                  <Paragraph>Option 4</Paragraph>
+                  <View pointerEvents="none">
+                    <RadioButton value="normal" checked={checked === 3} />
+                  </View>
+                </View>
+              </TouchableRipple>
             </View>
           </ScrollView>
         </Dialog.ScrollArea>
@@ -75,10 +85,11 @@ export default class extends Component<void, Props, State> {
 }
 
 const styles = StyleSheet.create({
-  checkBoxRow: {
+  row: {
     flexDirection: 'row',
     alignItems: 'center',
-    height: 56,
+    justifyContent: 'space-between',
+    padding: 8,
+    paddingHorizontal: 24,
   },
-  paragraph: { marginLeft: 16 },
 });
diff --git a/example/src/Dialogs/UndismissableDialog.js b/example/src/Dialogs/UndismissableDialog.js
index 5807ccd..bd253c1 100644
--- a/example/src/Dialogs/UndismissableDialog.js
+++ b/example/src/Dialogs/UndismissableDialog.js
@@ -1,7 +1,7 @@
 /* @flow */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Paragraph, Button, Dialog, Colors } from 'react-native-paper';
+import { Paragraph, Button, Dialog } from 'react-native-paper';
 
 const DialogWithLongText = ({
   visible,
@@ -16,9 +16,7 @@ const DialogWithLongText = ({
       <Paragraph>This is an undismissable dialog!!</Paragraph>
     </Dialog.Content>
     <Dialog.Actions>
-      <Button color={Colors.teal500} disabled>
-        Disagree
-      </Button>
+      <Button disabled>Disagree</Button>
       <Button primary onPress={close}>
         Agree
       </Button>
diff --git a/example/src/DividerExample.js b/example/src/DividerExample.js
index 237e017..c0aab1c 100644
--- a/example/src/DividerExample.js
+++ b/example/src/DividerExample.js
@@ -1,6 +1,7 @@
 /* @flow */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { ListView, StyleSheet } from 'react-native';
 import { Divider, Subheading, withTheme } from 'react-native-paper';
 
@@ -29,6 +30,9 @@ const DividerExample = props => {
 };
 
 DividerExample.title = 'Divider';
+DividerExample.propTypes = {
+  theme: PropTypes.object.isRequired,
+};
 
 const styles = StyleSheet.create({
   container: {
diff --git a/example/src/ProgressBarExample.js b/example/src/ProgressBarExample.js
index 44e4bb7..b89f7b9 100644
--- a/example/src/ProgressBarExample.js
+++ b/example/src/ProgressBarExample.js
@@ -1,11 +1,15 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { View, StyleSheet } from 'react-native';
 import { ProgressBar, Paragraph, Colors, withTheme } from 'react-native-paper';
 
 class ProgressBarExample extends Component {
   static title = 'Progress bar';
+  static propTypes = {
+    theme: PropTypes.object.isRequired,
+  };
 
   render() {
     const { theme: { colors: { background } } } = this.props;
diff --git a/example/src/TextExample.js b/example/src/TextExample.js
index 1f13245..4bcb5c8 100644
--- a/example/src/TextExample.js
+++ b/example/src/TextExample.js
@@ -1,6 +1,7 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { View, StyleSheet } from 'react-native';
 import {
   Caption,
@@ -13,6 +14,9 @@ import {
 
 class TextExample extends Component {
   static title = 'Typography';
+  static propTypes = {
+    theme: PropTypes.object.isRequired,
+  };
 
   render() {
     const { theme: { colors: { background } } } = this.props;
diff --git a/example/src/TextInputExample.js b/example/src/TextInputExample.js
index 1bc5fbe..35b0f8b 100644
--- a/example/src/TextInputExample.js
+++ b/example/src/TextInputExample.js
@@ -1,19 +1,24 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { ScrollView, StyleSheet } from 'react-native';
-import { Colors, TextInput } from 'react-native-paper';
+import { TextInput, withTheme } from 'react-native-paper';
 
-export default class TextInputExample extends Component {
+class TextInputExample extends Component {
   static title = 'TextInput';
+  static propTypes = {
+    theme: PropTypes.object.isRequired,
+  };
 
   state = {
     text: '',
   };
 
   render() {
+    const { theme: { colors: { background } } } = this.props;
     return (
-      <ScrollView style={styles.container}>
+      <ScrollView style={[styles.container, { backgroundColor: background }]}>
         <TextInput
           style={styles.inputContainerStyle}
           label="Normal input"
@@ -34,10 +39,11 @@ export default class TextInputExample extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.white,
     padding: 8,
   },
   inputContainerStyle: {
     margin: 8,
   },
 });
+
+export default withTheme(TextInputExample);
diff --git a/src/components/Button.js b/src/components/Button.js
index a70231d..d5dda5f 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -122,7 +122,7 @@ class Button extends PureComponent<void, Props, State> {
       style,
       theme,
     } = this.props;
-    const { colors, roundness } = theme;
+    const { colors, roundness, dark: isDarkTheme } = theme;
     const fontFamily = theme.fonts.medium;
     let backgroundColor, textColor, isDark;
     if (raised) {
@@ -153,7 +153,9 @@ class Button extends PureComponent<void, Props, State> {
     }
 
     if (disabled) {
-      textColor = 'rgba(0, 0, 0, .26)';
+      textColor = isDarkTheme
+        ? 'rgba(255, 255, 255, .26)'
+        : 'rgba(0, 0, 0, .26)';
     } else {
       if (raised) {
         textColor = isDark ? white : black;
diff --git a/src/components/Dialog/Dialog.js b/src/components/Dialog/Dialog.js
index 616e577..6a87898 100644
--- a/src/components/Dialog/Dialog.js
+++ b/src/components/Dialog/Dialog.js
@@ -1,14 +1,16 @@
 /* @flow */
 
-import React, { Children, Component } from 'react';
+import React, { Children, PureComponent } from 'react';
 import { StyleSheet, Platform, Animated } from 'react-native';
 import Modal from '../Modal';
 import { white } from '../../styles/colors';
+import withTheme from '../../core/withTheme';
 import Paper from '../Paper';
 import DialogActions from './Actions';
 import DialogTitle from './Title';
 import DialogContent from './Content';
 import DialogScrollArea from './ScrollArea';
+import type { Theme } from '../../types/Theme';
 
 const AnimatedPaper = Animated.createAnimatedComponent(Paper);
 
@@ -19,9 +21,19 @@ type DefaultProps = {
 
 type Props = {
   children?: any,
+  /**
+   * Determines whether clicking outside the dialog dismisses it, true by default
+   */
   dismissable?: boolean,
+  /**
+   * Callback that is called when the user dismisses the dialog
+   */
   onRequestClose?: Function,
   style?: any,
+  theme: Theme,
+  /**
+   * Determines Whether the dialog is visible
+   */
   visible: boolean,
 };
 
@@ -60,7 +72,8 @@ type Props = {
  * }
  * ```
  */
-class Dialog extends Component<DefaultProps, Props, void> {
+
+class Dialog extends PureComponent<DefaultProps, Props, void> {
   static Actions = DialogActions;
   static Title = DialogTitle;
   static Content = DialogContent;
@@ -78,7 +91,11 @@ class Dialog extends Component<DefaultProps, Props, void> {
       onRequestClose,
       visible,
       style,
+      theme,
     } = this.props;
+
+    const backgroundColor = theme.colors.paper;
+
     const childrenArray = Children.toArray(children);
     const title = childrenArray.find(child => child.type === DialogTitle);
     const actionBtnsChildren = childrenArray.filter(
@@ -107,7 +124,7 @@ class Dialog extends Component<DefaultProps, Props, void> {
         onRequestClose={onRequestClose}
         visible={visible}
       >
-        <AnimatedPaper style={[styles.container, style]} elevation={24}>
+        <AnimatedPaper style={[styles.container, { backgroundColor }, style]}>
           {title}
           {restOfChildrenWithoutTitle}
           {actionBtnsChildren}
@@ -117,7 +134,7 @@ class Dialog extends Component<DefaultProps, Props, void> {
   }
 }
 
-export default Dialog;
+export default withTheme(Dialog);
 
 const styles = StyleSheet.create({
   container: {
@@ -132,5 +149,6 @@ const styles = StyleSheet.create({
     marginHorizontal: 26,
     borderRadius: 2,
     backgroundColor: white,
+    elevation: 24,
   },
 });
diff --git a/src/components/Dialog/ScrollArea.js b/src/components/Dialog/ScrollArea.js
index 2ae1fa1..eef2545 100644
--- a/src/components/Dialog/ScrollArea.js
+++ b/src/components/Dialog/ScrollArea.js
@@ -2,7 +2,6 @@
 
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { grey400 } from '../../styles/colors';
 
 type Props = {
   children?: any,
@@ -15,7 +14,7 @@ const DialogScrollArea = ({ children, style }: Props) => (
 
 const styles = StyleSheet.create({
   container: {
-    borderColor: grey400,
+    borderColor: 'rgba(0, 0, 0, .12)',
     borderTopWidth: StyleSheet.hairlineWidth,
     borderBottomWidth: StyleSheet.hairlineWidth,
     paddingHorizontal: 24,
diff --git a/src/components/Dialog/Title.js b/src/components/Dialog/Title.js
index 604c1c3..f9f0f24 100644
--- a/src/components/Dialog/Title.js
+++ b/src/components/Dialog/Title.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import PaperTitle from '../Typography/Title';
+import Title from '../Typography/Title';
 import withTheme from '../../core/withTheme';
 import type { Theme } from '../../types/Theme';
 
@@ -17,9 +17,7 @@ const DialogTitle = ({
   theme: { colors: { text } },
   style,
 }: Props) => (
-  <PaperTitle style={[styles.text, { color: text }, style]}>
-    {children}
-  </PaperTitle>
+  <Title style={[styles.text, { color: text }, style]}>{children}</Title>
 );
 
 const styles = StyleSheet.create({