diff --git a/.gitignore b/.gitignore
index 4011743..b32f3eb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,6 +40,7 @@ local.properties
 #
 node_modules/
 npm-debug.log
+yarn-error.log
 
 # BUCK
 buck-out/
diff --git a/example/.eslintrc b/example/.eslintrc
index 5c13060..41a7b2b 100644
--- a/example/.eslintrc
+++ b/example/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "extends": '../.eslintrc',
+  "extends": "../.eslintrc",
 
   "settings": {
     "import/core-modules": [ "react-native-paper" ]
diff --git a/example/DrawerItems.js b/example/DrawerItems.js
new file mode 100644
index 0000000..d3fba2a
--- /dev/null
+++ b/example/DrawerItems.js
@@ -0,0 +1,86 @@
+/* @flow */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { View, StyleSheet, Platform } from 'react-native';
+import {
+  DrawerItem,
+  DrawerSection,
+  withTheme,
+  Checkbox,
+  TouchableRipple,
+  Paragraph,
+  Colors,
+} from 'react-native-paper';
+
+const DrawerItemsData = [
+  { label: 'Inbox', icon: 'inbox', key: 0 },
+  { label: 'Starred', icon: 'star', key: 1 },
+  { label: 'Sent mail', icon: 'send', key: 2 },
+  { label: 'Colored label', icon: 'color-lens', key: 3 },
+  { label: 'A very long title that will be truncated', icon: 'delete', key: 4 },
+];
+
+class DrawerItems extends Component {
+  static propTypes = {
+    theme: PropTypes.object.isRequired,
+    toggleTheme: PropTypes.func.isRequired,
+  };
+
+  state = {
+    open: false,
+    drawerItemIndex: 0,
+    isDark: true,
+  };
+
+  _setDrawerItem = index => this.setState({ drawerItemIndex: index });
+
+  _toggleTheme = () => {
+    this.props.toggleTheme();
+    this.setState({ isDark: !this.state.isDark });
+  };
+
+  render() {
+    const { theme: { colors: { paper } } } = this.props;
+    return (
+      <View style={[styles.drawerContent, { backgroundColor: paper }]}>
+        <DrawerSection label="Subheader">
+          {DrawerItemsData.map((props, index) => (
+            <DrawerItem
+              {...props}
+              key={props.key}
+              color={props.key === 3 ? Colors.tealA200 : null}
+              active={this.state.drawerItemIndex === index}
+              onPress={() => this._setDrawerItem(index)}
+            />
+          ))}
+          <TouchableRipple onPress={this._toggleTheme}>
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                paddingVertical: 8,
+                paddingHorizontal: 16,
+              }}
+            >
+              <Paragraph>Dark Theme</Paragraph>
+              <View pointerEvents="none">
+                <Checkbox checked={this.state.isDark} />
+              </View>
+            </View>
+          </TouchableRipple>
+        </DrawerSection>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  drawerContent: {
+    flex: 1,
+    paddingTop: Platform.OS === 'android' ? 25 : 22,
+  },
+});
+
+export default withTheme(DrawerItems);
diff --git a/example/main.js b/example/main.js
index a120e08..4d33ead 100644
--- a/example/main.js
+++ b/example/main.js
@@ -2,65 +2,49 @@
 
 import Expo from 'expo';
 import React, { Component } from 'react';
-import { View, StyleSheet, Platform, StatusBar } from 'react-native';
+import { StatusBar } from 'react-native';
 import {
-  DrawerItem,
-  DrawerSection,
   Provider as PaperProvider,
+  DarkTheme,
+  DefaultTheme,
 } from 'react-native-paper';
 import { DrawerNavigator } from 'react-navigation';
 import RootNavigator from './src/RootNavigator';
+import DrawerItems from './DrawerItems';
 
 StatusBar.setBarStyle('light-content');
 
-const DrawerItemsData = [
-  { label: 'Inbox', icon: 'inbox', key: 0 },
-  { label: 'Starred', icon: 'star', key: 1 },
-  { label: 'Sent mail', icon: 'send', key: 2 },
-  { label: 'A very long title that will be truncated', icon: 'delete', key: 3 },
-  { label: 'No Icon', key: 4 },
-];
+const App = DrawerNavigator(
+  { Home: { screen: RootNavigator } },
+  {
+    contentComponent: ({ screenProps }) => (
+      <DrawerItems toggleTheme={screenProps.toggleTheme} />
+    ),
+  }
+);
 
-class DrawerItems extends Component {
+class PaperExample extends Component {
   state = {
-    open: false,
-    drawerItemIndex: 0,
+    theme: DarkTheme,
   };
 
-  _setDrawerItem = index => this.setState({ drawerItemIndex: index });
+  _toggleTheme = () =>
+    this.setState({
+      theme: this.state.theme === DarkTheme ? DefaultTheme : DarkTheme,
+    });
 
   render() {
     return (
-      <View style={styles.drawerContent}>
-        <DrawerSection label="Subheader">
-          {DrawerItemsData.map((props, index) => (
-            <DrawerItem
-              {...props}
-              key={props.key}
-              active={this.state.drawerItemIndex === index}
-              onPress={() => this._setDrawerItem(index)}
-            />
-          ))}
-        </DrawerSection>
-      </View>
+      <PaperProvider theme={this.state.theme}>
+        <App
+          screenProps={{
+            toggleTheme: this._toggleTheme,
+            theme: this.state.theme,
+          }}
+        />
+      </PaperProvider>
     );
   }
 }
 
-const App = DrawerNavigator(
-  { Home: { screen: RootNavigator } },
-  { contentComponent: () => <DrawerItems /> }
-);
-
-const styles = StyleSheet.create({
-  drawerContent: {
-    flex: 1,
-    marginTop: Platform.OS === 'android' ? 25 : 22,
-  },
-});
-
-Expo.registerRootComponent(() => (
-  <PaperProvider>
-    <App onNavigationStateChange={null} />
-  </PaperProvider>
-));
+Expo.registerRootComponent(PaperExample);
diff --git a/example/rn-cli.config.js b/example/rn-cli.config.js
index c7eeaee..2b54702 100644
--- a/example/rn-cli.config.js
+++ b/example/rn-cli.config.js
@@ -9,13 +9,7 @@ module.exports = {
     return [__dirname, path.resolve(__dirname, '..')];
   },
   getProvidesModuleNodeModules() {
-    return [
-      'react-native',
-      'react',
-      'prop-types',
-      'react-native-drawer',
-      'color',
-    ];
+    return ['react-native', 'react', 'prop-types', 'color', 'lodash.merge'];
   },
   getBlacklistRE() {
     return blacklist([
diff --git a/example/src/ButtonExample.js b/example/src/ButtonExample.js
index a2e0f45..b6abdea 100644
--- a/example/src/ButtonExample.js
+++ b/example/src/ButtonExample.js
@@ -2,9 +2,9 @@
 
 import React, { Component } from 'react';
 import { View, StyleSheet, Image } from 'react-native';
-import { Colors, Button } from 'react-native-paper';
+import { Colors, Button, withTheme } from 'react-native-paper';
 
-export default class ButtonExample extends Component {
+class ButtonExample extends Component {
   static title = 'Button';
 
   state = {
@@ -14,8 +14,9 @@ export default class ButtonExample extends Component {
   render() {
     const uri = { uri: 'https://facebook.github.io/react/img/logo_og.png' };
     const source = require('../assets/chameleon.jpg');
+    const { theme: { colors: { background } } } = this.props;
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, { backgroundColor: background }]}>
         <View style={styles.row}>
           <Button>Simple</Button>
           <Button primary>Primary</Button>
@@ -78,7 +79,6 @@ export default class ButtonExample extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.grey200,
     padding: 4,
   },
 
@@ -88,3 +88,5 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
 });
+
+export default withTheme(ButtonExample);
diff --git a/example/src/CardExample.js b/example/src/CardExample.js
index b18dabd..500eaee 100644
--- a/example/src/CardExample.js
+++ b/example/src/CardExample.js
@@ -1,23 +1,27 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { ScrollView, StyleSheet } from 'react-native';
 import {
   Title,
   Caption,
   Paragraph,
-  Colors,
   Card,
   Button,
+  withTheme,
 } from 'react-native-paper';
 
-export default class CardExample extends Component {
+class CardExample extends Component {
   static title = 'Card';
-
+  static propTypes = {
+    theme: PropTypes.object.isRequired,
+  };
   render() {
+    const { theme: { colors: { background } } } = this.props;
     return (
       <ScrollView
-        style={styles.container}
+        style={[styles.container, { backgroundColor: background }]}
         contentContainerStyle={styles.content}
       >
         <Card>
@@ -65,7 +69,8 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   content: {
-    backgroundColor: Colors.grey200,
     padding: 4,
   },
 });
+
+export default withTheme(CardExample);
diff --git a/example/src/CheckboxExample.js b/example/src/CheckboxExample.js
index edbb86f..b1dc5d2 100644
--- a/example/src/CheckboxExample.js
+++ b/example/src/CheckboxExample.js
@@ -1,16 +1,21 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { View, StyleSheet } from 'react-native';
 import {
   Paragraph,
   Checkbox,
   Colors,
   TouchableRipple,
+  withTheme,
 } from 'react-native-paper';
 
-export default class CheckboxExample extends Component {
+class CheckboxExample extends Component {
   static title = 'Checkbox';
+  static propTypes = {
+    theme: PropTypes.object.isRequired,
+  };
 
   state = {
     checkedNormal: true,
@@ -18,8 +23,16 @@ export default class CheckboxExample extends Component {
   };
 
   render() {
+    const { theme: { colors: { background } } } = this.props;
     return (
-      <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: background,
+          },
+        ]}
+      >
         <TouchableRipple
           onPress={() =>
             this.setState(state => ({
@@ -78,3 +91,5 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
   },
 });
+
+export default withTheme(CheckboxExample);
diff --git a/example/src/DividerExample.js b/example/src/DividerExample.js
index 303a167..237e017 100644
--- a/example/src/DividerExample.js
+++ b/example/src/DividerExample.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { ListView, StyleSheet } from 'react-native';
-import { Divider, Subheading, Colors } from 'react-native-paper';
+import { Divider, Subheading, withTheme } from 'react-native-paper';
 
 const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
 const dataSource = ds.cloneWithRows([
@@ -14,10 +14,11 @@ const dataSource = ds.cloneWithRows([
   'Peach',
 ]);
 
-const DividerExample = () => {
+const DividerExample = props => {
+  const { theme: { colors: { background } } } = props;
   return (
     <ListView
-      style={styles.container}
+      style={[styles.container, { backgroundColor: background }]}
       dataSource={dataSource}
       renderRow={rowData => (
         <Subheading style={styles.item}>{rowData}</Subheading>
@@ -32,7 +33,6 @@ DividerExample.title = 'Divider';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.white,
   },
   item: {
     paddingVertical: 8,
@@ -40,4 +40,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default DividerExample;
+export default withTheme(DividerExample);
diff --git a/example/src/ExampleList.js b/example/src/ExampleList.js
index f2363bf..16d0e86 100644
--- a/example/src/ExampleList.js
+++ b/example/src/ExampleList.js
@@ -2,8 +2,9 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { ListView, Text, StyleSheet } from 'react-native';
-import { Colors, TouchableRipple, Divider } from 'react-native-paper';
+import { ListView } from 'react-native';
+import { Divider, withTheme } from 'react-native-paper';
+import ExampleListRow from './ExampleListRow';
 import ButtonExample from './ButtonExample';
 import FABExample from './FABExample';
 import CardExample from './CardExample';
@@ -41,29 +42,30 @@ export const examples = {
 const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
 const dataSource = ds.cloneWithRows(Object.keys(examples));
 
-export default class ExampleList extends Component {
+class ExampleList extends Component {
   static navigationOptions = {
     title: 'Examples',
   };
 
   static propTypes = {
+    theme: PropTypes.object.isRequired,
     navigation: PropTypes.object,
   };
 
   _renderRow = id => (
-    <TouchableRipple
-      style={styles.item}
+    <ExampleListRow
+      title={examples[id].title}
       onPress={() => this.props.navigation.navigate(id)}
-    >
-      <Text style={styles.text}>{examples[id].title}</Text>
-    </TouchableRipple>
+    />
   );
 
   _renderSeparator = (sectionId, rowId) => <Divider key={rowId} />;
 
   render() {
+    const { theme: { colors: { background } } } = this.props;
     return (
       <ListView
+        contentContainerStyle={{ flex: 1, backgroundColor: background }}
         dataSource={dataSource}
         renderRow={this._renderRow}
         renderSeparator={this._renderSeparator}
@@ -72,13 +74,4 @@ export default class ExampleList extends Component {
   }
 }
 
-const styles = StyleSheet.create({
-  item: {
-    padding: 16,
-    backgroundColor: Colors.white,
-  },
-  text: {
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-});
+export default withTheme(ExampleList);
diff --git a/example/src/ExampleListRow.js b/example/src/ExampleListRow.js
new file mode 100644
index 0000000..0867d60
--- /dev/null
+++ b/example/src/ExampleListRow.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text, StyleSheet } from 'react-native';
+import { TouchableRipple, withTheme } from 'react-native-paper';
+
+const ExampleListRow = ({ title, theme, onPress }) => (
+  <TouchableRipple
+    style={[styles.item, { backgroundColor: theme.colors.paper }]}
+    onPress={onPress}
+  >
+    <Text style={[styles.text, { color: theme.colors.text }]}>{title}</Text>
+  </TouchableRipple>
+);
+
+ExampleListRow.propTypes = {
+  title: PropTypes.string.isRequired,
+  onPress: PropTypes.func,
+  theme: PropTypes.object.isRequired,
+};
+
+const styles = StyleSheet.create({
+  item: {
+    padding: 16,
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
+
+export default withTheme(ExampleListRow);
diff --git a/example/src/FABExample.js b/example/src/FABExample.js
index 6e65676..eafd296 100644
--- a/example/src/FABExample.js
+++ b/example/src/FABExample.js
@@ -1,17 +1,22 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { View, StyleSheet } from 'react-native';
-import { Colors, FAB } from 'react-native-paper';
+import { Colors, FAB, withTheme } from 'react-native-paper';
 
-export default class ButtonExample extends Component {
+class ButtonExample extends Component {
   static title = 'Floating Action Button';
+  static propTypes = {
+    theme: PropTypes.object.isRequired,
+  };
 
   _handlePress = () => {};
 
   render() {
+    const { theme: { colors: { background } } } = this.props;
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, { backgroundColor: background }]}>
         <View style={styles.row}>
           <FAB
             small
@@ -43,3 +48,5 @@ const styles = StyleSheet.create({
     margin: 8,
   },
 });
+
+export default withTheme(ButtonExample);
diff --git a/example/src/PaperExample.js b/example/src/PaperExample.js
index c233c59..11757b3 100644
--- a/example/src/PaperExample.js
+++ b/example/src/PaperExample.js
@@ -1,16 +1,21 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { ScrollView, StyleSheet } from 'react-native';
-import { Text, Colors, Paper } from 'react-native-paper';
+import { Text, Paper, withTheme } from 'react-native-paper';
 
-export default class RipplesExample extends Component {
+class PaperExample extends Component {
   static title = 'Paper';
+  static propTypes = {
+    theme: PropTypes.object.isRequired,
+  };
 
   render() {
+    const { theme: { colors: { background } } } = this.props;
     return (
       <ScrollView
-        style={styles.container}
+        style={[styles.container, { backgroundColor: background }]}
         contentContainerStyle={styles.content}
       >
         {[1, 2, 4, 6, 12].map(i => {
@@ -28,7 +33,6 @@ export default class RipplesExample extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.grey200,
   },
 
   content: {
@@ -44,3 +48,5 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
 });
+
+export default withTheme(PaperExample);
diff --git a/example/src/ProgressBarExample.js b/example/src/ProgressBarExample.js
index 3e5d4e9..44e4bb7 100644
--- a/example/src/ProgressBarExample.js
+++ b/example/src/ProgressBarExample.js
@@ -2,14 +2,15 @@
 
 import React, { Component } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { ProgressBar, Paragraph, Colors } from 'react-native-paper';
+import { ProgressBar, Paragraph, Colors, withTheme } from 'react-native-paper';
 
-export default class ProgressBarExample extends Component {
+class ProgressBarExample extends Component {
   static title = 'Progress bar';
 
   render() {
+    const { theme: { colors: { background } } } = this.props;
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, { backgroundColor: background }]}>
         <Paragraph>ProgressBar primary color</Paragraph>
         <ProgressBar progress={0.5} />
         <Paragraph>ProgressBar custom color</Paragraph>
@@ -20,6 +21,9 @@ export default class ProgressBarExample extends Component {
 }
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     padding: 16,
   },
 });
+
+export default withTheme(ProgressBarExample);
diff --git a/example/src/RadioButtonExample.js b/example/src/RadioButtonExample.js
index 13fc6b8..8df267b 100644
--- a/example/src/RadioButtonExample.js
+++ b/example/src/RadioButtonExample.js
@@ -1,24 +1,37 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { View, StyleSheet } from 'react-native';
 import {
   Paragraph,
   RadioButton,
   Colors,
   TouchableRipple,
+  withTheme,
 } from 'react-native-paper';
 
-export default class RadioButtonExample extends Component {
+class RadioButtonExample extends Component {
   static title = 'Radio button';
+  static propTypes = {
+    theme: PropTypes.object.isRequired,
+  };
 
   state = {
     checked: 'normal',
   };
 
   render() {
+    const { theme: { colors: { background } } } = this.props;
     return (
-      <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: background,
+          },
+        ]}
+      >
         <TouchableRipple onPress={() => this.setState({ checked: 'normal' })}>
           <View style={styles.row}>
             <Paragraph>Normal</Paragraph>
@@ -69,3 +82,5 @@ const styles = StyleSheet.create({
     padding: 8,
   },
 });
+
+export default withTheme(RadioButtonExample);
diff --git a/example/src/SearchBarExample.js b/example/src/SearchBarExample.js
index c851320..b3238b0 100644
--- a/example/src/SearchBarExample.js
+++ b/example/src/SearchBarExample.js
@@ -1,11 +1,15 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { StyleSheet, View } from 'react-native';
-import { Colors, Caption, SearchBar } from 'react-native-paper';
+import { Colors, Caption, SearchBar, withTheme } from 'react-native-paper';
 
-export default class SearchExample extends Component {
+class SearchExample extends Component {
   static title = 'Search bar';
+  static propTypes = {
+    theme: PropTypes.object.isRequired,
+  };
 
   state = {
     firstQuery: '',
@@ -14,8 +18,9 @@ export default class SearchExample extends Component {
   };
 
   render() {
+    const { theme: { colors: { background } } } = this.props;
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, { backgroundColor: background }]}>
         <SearchBar
           placeholder="Search"
           onChangeText={query => this.setState({ firstQuery: query })}
@@ -51,3 +56,5 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
   },
 });
+
+export default withTheme(SearchExample);
diff --git a/example/src/SwitchExample.js b/example/src/SwitchExample.js
index caf44c9..df68f52 100644
--- a/example/src/SwitchExample.js
+++ b/example/src/SwitchExample.js
@@ -1,18 +1,28 @@
 /* @flow */
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { View, StyleSheet, Platform } from 'react-native';
-import { Paragraph, Switch, Colors, TouchableRipple } from 'react-native-paper';
+import {
+  Paragraph,
+  Switch,
+  Colors,
+  TouchableRipple,
+  withTheme,
+} from 'react-native-paper';
 
-export default class SwitchExample extends Component {
+class SwitchExample extends Component {
   static title = 'Switch';
-
+  static propTypes = {
+    theme: PropTypes.object.isRequired,
+  };
   state = {
     valueNormal: true,
     valueCustom: true,
   };
 
   render() {
+    const { theme: { colors: { background } } } = this.props;
     const switchValueNormalLabel = `switch ${this.state.valueNormal === true
       ? 'on'
       : 'off'}`;
@@ -22,7 +32,14 @@ export default class SwitchExample extends Component {
       : 'off'}`;
 
     return Platform.OS === 'android' ? (
-      <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: background,
+          },
+        ]}
+      >
         <TouchableRipple
           onPress={() =>
             this.setState(state => ({
@@ -59,7 +76,14 @@ export default class SwitchExample extends Component {
         </View>
       </View>
     ) : (
-      <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: background,
+          },
+        ]}
+      >
         <View style={styles.row}>
           <Paragraph>Normal {switchValueNormalLabel}</Paragraph>
           <View>
@@ -117,3 +141,5 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
   },
 });
+
+export default withTheme(SwitchExample);
diff --git a/example/src/TextExample.js b/example/src/TextExample.js
index c0e4705..1f13245 100644
--- a/example/src/TextExample.js
+++ b/example/src/TextExample.js
@@ -8,14 +8,16 @@ import {
   Paragraph,
   Subheading,
   Title,
+  withTheme,
 } from 'react-native-paper';
 
-export default class TextExample extends Component {
+class TextExample extends Component {
   static title = 'Typography';
 
   render() {
+    const { theme: { colors: { background } } } = this.props;
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, { backgroundColor: background }]}>
         <Caption style={styles.text}>Caption</Caption>
         <Paragraph style={styles.text}>Paragraph</Paragraph>
         <Subheading style={styles.text}>Subheading</Subheading>
@@ -28,8 +30,11 @@ export default class TextExample extends Component {
 const styles = StyleSheet.create({
   container: {
     padding: 16,
+    flex: 1,
   },
   text: {
     marginVertical: 4,
   },
 });
+
+export default withTheme(TextExample);
diff --git a/example/yarn.lock b/example/yarn.lock
index d8c9aa5..2f08329 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -46,13 +46,7 @@
   dependencies:
     cross-spawn "^4.0.2"
 
-"@expo/vector-icons@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@expo/vector-icons/-/vector-icons-5.0.0.tgz#380d578a58b736b693acdd1aa86f8b6576465ba4"
-  dependencies:
-    react-native-vector-icons "4.1.1"
-
-"@expo/vector-icons@^5.2.0":
+"@expo/vector-icons@^5.0.0", "@expo/vector-icons@^5.2.0":
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/@expo/vector-icons/-/vector-icons-5.2.0.tgz#877f75c00bf21313cdb231c92cbcfd40e46ee2a1"
   dependencies:
@@ -750,7 +744,7 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
-babel-polyfill@^6.20.0:
+babel-polyfill@^6.20.0, babel-polyfill@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
   dependencies:
@@ -758,14 +752,6 @@ babel-polyfill@^6.20.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
-babel-polyfill@^6.23.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
-  dependencies:
-    babel-runtime "^6.26.0"
-    core-js "^2.5.0"
-    regenerator-runtime "^0.10.5"
-
 babel-preset-es2015-node@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/babel-preset-es2015-node/-/babel-preset-es2015-node-6.1.1.tgz#60b23157024b0cfebf3a63554cb05ee035b4e55f"
@@ -911,13 +897,6 @@ babel-runtime@^6.0.0, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
 babel-template@^6.24.1, babel-template@^6.25.0, babel-template@^6.3.0:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
@@ -1399,10 +1378,6 @@ core-js@^2.2.2, core-js@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
 
-core-js@^2.5.0:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
-
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -1478,18 +1453,12 @@ dateformat@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.0.0.tgz#2743e3abb5c3fc2462e527dca445e04e9f4dee17"
 
-debug@*, debug@2.6.8, debug@^2.1.1, debug@^2.2.0, debug@^2.6.2:
+debug@*, debug@2, debug@2.6.8, debug@^2.1.1, debug@^2.2.0, debug@^2.6.2:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
   dependencies:
     ms "2.0.0"
 
-debug@2:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
-  dependencies:
-    ms "2.0.0"
-
 debug@2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
@@ -2305,26 +2274,7 @@ ini@~1.3.0:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
 
-inquirer@^3.0.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.0.tgz#45b44c2160c729d7578c54060b3eed94487bb42b"
-  dependencies:
-    ansi-escapes "^2.0.0"
-    chalk "^2.0.0"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^2.0.4"
-    figures "^2.0.0"
-    lodash "^4.3.0"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rx-lite "^4.0.8"
-    rx-lite-aggregates "^4.0.8"
-    string-width "^2.1.0"
-    strip-ansi "^4.0.0"
-    through "^2.3.6"
-
-inquirer@^3.0.6:
+inquirer@^3.0.1, inquirer@^3.0.6:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.2.tgz#c2aaede1507cc54d826818737742d621bef2e823"
   dependencies:
@@ -2535,14 +2485,10 @@ jest-docblock@20.1.0-chi.1:
   version "20.1.0-chi.1"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.1.0-chi.1.tgz#06981ab0e59498a2492333b0c5502a82e4603207"
 
-jest-docblock@20.1.0-delta.4:
+jest-docblock@20.1.0-delta.4, jest-docblock@^20.1.0-chi.1:
   version "20.1.0-delta.4"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.1.0-delta.4.tgz#360d4f5fb702730c4136c4e71e5706188a694682"
 
-jest-docblock@^20.1.0-chi.1:
-  version "20.1.0-echo.1"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.1.0-echo.1.tgz#be02f43ee019f97e6b83267c746ac7b40d290fe8"
-
 jest-haste-map@20.1.0-chi.1:
   version "20.1.0-chi.1"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-20.1.0-chi.1.tgz#db5f5f31362c76e242b40ea9a3ccfa364719cee3"
@@ -3566,11 +3512,11 @@ qs@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-4.0.0.tgz#c31d9b74ec27df75e543a86c78728ed8d4623607"
 
-qs@6.4.0, qs@^6.1.0, qs@^6.2.1, qs@~6.4.0:
+qs@6.4.0, qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
-qs@^6.5.0:
+qs@^6.1.0, qs@^6.2.1, qs@^6.5.0:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
 
@@ -3940,14 +3886,10 @@ regenerate@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
 
-regenerator-runtime@^0.10.0, regenerator-runtime@^0.10.5:
+regenerator-runtime@^0.10.0:
   version "0.10.5"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
 
-regenerator-runtime@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
-
 regenerator-runtime@^0.9.5:
   version "0.9.6"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.9.6.tgz#d33eb95d0d2001a4be39659707c51b0cb71ce029"
@@ -4167,14 +4109,10 @@ sax@~1.1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.1.6.tgz#5d616be8a5e607d54e114afae55b7eaf2fcc3240"
 
-"semver@2 || 3 || 4 || 5", semver@5.x, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
+"semver@2 || 3 || 4 || 5", semver@5.x, semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
-semver@^5.0.1:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
-
 send@0.13.2:
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.13.2.tgz#765e7607c8055452bba6f0b052595350986036de"
@@ -4818,18 +4756,12 @@ which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
 
-which@^1.2.14:
+which@^1.2.14, which@^1.2.9:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
   dependencies:
     isexe "^2.0.0"
 
-which@^1.2.9:
-  version "1.2.14"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
-  dependencies:
-    isexe "^2.0.0"
-
 wide-align@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
diff --git a/package.json b/package.json
index 29dd514..880714d 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "color": "^0.11.4",
+    "lodash": "^4.17.4",
     "prop-types": "^15.5.10",
     "react-native-drawer": "^2.5.0"
   },
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
index e57b468..269fecc 100644
--- a/src/components/Card/Card.js
+++ b/src/components/Card/Card.js
@@ -13,7 +13,6 @@ import Paper from '../Paper';
 import CardContent from './CardContent';
 import CardCover from './CardCover';
 import CardActions from './CardActions';
-import { white } from '../../styles/colors';
 import withTheme from '../../core/withTheme';
 import type { Theme } from '../../types/Theme';
 
@@ -109,7 +108,6 @@ class Card extends Component<DefaultProps, Props, State> {
 
 const styles = StyleSheet.create({
   card: {
-    backgroundColor: white,
     margin: 4,
   },
   container: {
diff --git a/src/components/DrawerItem.js b/src/components/DrawerItem.js
index cb90553..2c0e0af 100644
--- a/src/components/DrawerItem.js
+++ b/src/components/DrawerItem.js
@@ -6,12 +6,16 @@ import PropTypes from 'prop-types';
 import { View, Text, StyleSheet } from 'react-native';
 import Icon from './Icon';
 import TouchableRipple from './TouchableRipple';
-import { grey300 } from '../styles/colors';
+import { grey300, grey700 } from '../styles/colors';
 import withTheme from '../core/withTheme';
 import type { Theme } from '../types/Theme';
 import type { IconSource } from './Icon';
 
 type Props = {
+  /**
+   * Custom color for checkbox
+   */
+  color?: string,
   icon?: IconSource,
   label: string,
   active?: boolean,
@@ -20,6 +24,7 @@ type Props = {
 };
 
 const DrawerItem = ({
+  color: activeColor,
   icon,
   label,
   active,
@@ -27,14 +32,15 @@ const DrawerItem = ({
   theme,
   ...props
 }: Props) => {
-  const { colors } = theme;
+  const { colors, dark } = theme;
+  const backgroundColor = active ? (dark ? grey700 : grey300) : 'transparent';
   const labelColor = active
-    ? colors.primary
+    ? activeColor || colors.text
     : color(colors.text)
-        .alpha(0.87)
+        .alpha(0.54)
         .rgbaString();
   const iconColor = active
-    ? colors.primary
+    ? activeColor || colors.text
     : color(colors.text)
         .alpha(0.54)
         .rgbaString();
@@ -42,12 +48,7 @@ const DrawerItem = ({
   const labelMargin = icon ? 32 : 0;
   return (
     <TouchableRipple {...props} onPress={onPress}>
-      <View
-        style={[
-          styles.wrapper,
-          { backgroundColor: active ? grey300 : 'transparent' },
-        ]}
-      >
+      <View style={[styles.wrapper, { backgroundColor }]}>
         {icon && <Icon name={icon} size={24} color={iconColor} />}
         <Text
           numberOfLines={1}
@@ -76,6 +77,7 @@ const styles = StyleSheet.create({
 });
 
 DrawerItem.propTypes = {
+  color: PropTypes.string,
   icon: PropTypes.string,
   label: PropTypes.string.isRequired,
   active: PropTypes.bool,
diff --git a/src/components/GridView.js b/src/components/GridView.js
index 8ee08ba..694433f 100644
--- a/src/components/GridView.js
+++ b/src/components/GridView.js
@@ -3,7 +3,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Dimensions, ListView, StyleSheet, ViewPropTypes } from 'react-native';
-import { grey200 } from '../styles/colors';
+import withTheme from '../core/withTheme';
+import type { Theme } from '../types/Theme';
 
 type Layout = {
   width: number,
@@ -18,6 +19,7 @@ type Props = {
   initialLayout: Layout,
   onLayout?: Function,
   contentContainerStyle?: any,
+  theme: Theme,
 };
 
 type DefaultProps = {
@@ -30,11 +32,7 @@ type State = {
   layout: Layout,
 };
 
-export default class GridView extends PureComponent<
-  DefaultProps,
-  Props,
-  State
-> {
+class GridView extends PureComponent<DefaultProps, Props, State> {
   static propTypes = {
     dataSource: PropTypes.instanceOf(ListView.DataSource).isRequired,
     spacing: PropTypes.number.isRequired,
@@ -42,6 +40,7 @@ export default class GridView extends PureComponent<
     renderSectionHeader: PropTypes.func,
     renderRow: PropTypes.func.isRequired,
     onLayout: PropTypes.func,
+    theme: PropTypes.object.isRequired,
     contentContainerStyle: ViewPropTypes.style,
   };
 
@@ -119,6 +118,7 @@ export default class GridView extends PureComponent<
   _setRef = (c: Object) => (this._root = c);
 
   render() {
+    const { spacing, theme } = this.props;
     return (
       <ListView
         {...this.props}
@@ -128,7 +128,7 @@ export default class GridView extends PureComponent<
         renderRow={this._renderRow}
         contentContainerStyle={[
           styles.grid,
-          { padding: this.props.spacing / 2 },
+          { padding: spacing / 2, backgroundColor: theme.colors.background },
           this.props.contentContainerStyle,
         ]}
         ref={this._setRef}
@@ -142,6 +142,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     alignItems: 'flex-start',
-    backgroundColor: grey200,
   },
 });
+
+export default withTheme(GridView);
diff --git a/src/components/Paper.js b/src/components/Paper.js
index 6ae2d26..205ff59 100644
--- a/src/components/Paper.js
+++ b/src/components/Paper.js
@@ -2,13 +2,16 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, View, ViewPropTypes } from 'react-native';
-import * as Colors from '../styles/colors';
+import { View, ViewPropTypes, StyleSheet } from 'react-native';
 import shadow from '../styles/shadow';
+import withTheme from '../core/withTheme';
+import * as Colors from '../styles/colors';
+import type { Theme } from '../types/Theme';
 
 type Props = {
   children?: any,
   style?: any,
+  theme: Theme,
 };
 
 /**
@@ -16,23 +19,34 @@ type Props = {
  * 
  * Note: Pass *elevation* style, to apply shadow to the component. Defaults to 2.
  */
-export default class Paper extends Component<void, Props, void> {
+class Paper extends Component<void, Props, void> {
   static propTypes = {
     children: PropTypes.node,
+    theme: PropTypes.object.isRequired,
     style: ViewPropTypes.style,
   };
 
   render() {
-    const { style, ...restOfProps } = this.props;
+    const { style, theme, ...restOfProps } = this.props;
     const flattenedStyles = StyleSheet.flatten(style) || {};
     const { elevation = 2 } = flattenedStyles;
 
     return (
-      <View {...restOfProps} style={[styles.paper, shadow(elevation), style]} />
+      <View
+        {...restOfProps}
+        style={[
+          styles.paper,
+          { backgroundColor: theme.colors.paper },
+          shadow(elevation),
+          style,
+        ]}
+      />
     );
   }
 }
 
+export default withTheme(Paper);
+
 const styles = StyleSheet.create({
   paper: {
     backgroundColor: Colors.white,
diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js
index 1cc166c..855c0b8 100644
--- a/src/components/RadioButton.js
+++ b/src/components/RadioButton.js
@@ -74,7 +74,6 @@ class RadioButton extends Component<void, Props, State> {
 
   render() {
     const { disabled, onPress, checked, theme, ...rest } = this.props;
-
     const checkedColor = this.props.color || theme.colors.accent;
     const uncheckedColor = 'rgba(0, 0, 0, .54)';
 
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index a3c4c79..4964ba8 100644
--- a/src/components/SearchBar.js
+++ b/src/components/SearchBar.js
@@ -9,7 +9,6 @@ import withTheme from '../core/withTheme';
 import Icon from './Icon';
 import TouchableIcon from './TouchableIcon';
 import Paper from './Paper';
-import { white } from '../styles/colors';
 import type { Theme } from '../types/Theme';
 import type { IconSource } from './Icon';
 
@@ -66,11 +65,13 @@ class SearchBar extends Component<void, Props, void> {
       style,
       ...rest
     } = this.props;
-    const { colors, roundness } = theme;
+    const { colors, roundness, dark } = theme;
     const textColor = colors.text;
-    const iconColor = color(textColor)
-      .alpha(0.54)
-      .rgbaString();
+    const iconColor = dark
+      ? textColor
+      : color(textColor)
+          .alpha(0.54)
+          .rgbaString();
     const rippleColor = color(textColor)
       .alpha(0.32)
       .rgbaString();
@@ -125,7 +126,6 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: white,
     margin: 4,
   },
   input: {
diff --git a/src/core/withTheme.js b/src/core/withTheme.js
index d55822d..bdd33e4 100644
--- a/src/core/withTheme.js
+++ b/src/core/withTheme.js
@@ -2,7 +2,9 @@
 
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import _ from 'lodash';
 import { channel } from './ThemeProvider';
+import DefaultTheme from '../styles/DefaultTheme';
 import type { Theme } from '../types/Theme';
 
 type State = {
@@ -36,7 +38,7 @@ export default function withTheme<T: *>(Comp: ReactClass<T>): ReactClass<T> {
       }
 
       this.state = {
-        theme: this._merge(theme, this.props.theme),
+        theme: _.merge({}, DefaultTheme, theme, this.props.theme),
       };
     }
 
@@ -46,14 +48,15 @@ export default function withTheme<T: *>(Comp: ReactClass<T>): ReactClass<T> {
       this._subscription =
         this.context[channel] &&
         this.context[channel].subscribe(theme =>
-          this.setState({ theme: this._merge(theme, this.props.theme) })
+          this.setState({ theme: _.merge({}, theme, this.props.theme) })
         );
     }
 
     componentWillReceiveProps(nextProps: *) {
       if (this.props.theme !== nextProps.theme) {
         this.setState({
-          theme: this._merge(
+          theme: _.merge(
+            {},
             this.context[channel] && this.context[channel].get(),
             nextProps.theme
           ),
@@ -69,14 +72,6 @@ export default function withTheme<T: *>(Comp: ReactClass<T>): ReactClass<T> {
       return this._root;
     }
 
-    _merge = (a, b) => {
-      if (a && b) {
-        return { ...a, ...b };
-      } else {
-        return a || b;
-      }
-    };
-
     _subscription: { remove: Function };
     _root: any;
 
diff --git a/src/index.js b/src/index.js
index effb3ea..a333b59 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,6 +7,7 @@ export { default as withTheme } from './core/withTheme';
 export { default as ThemeProvider } from './core/ThemeProvider';
 export { default as Provider } from './core/Provider';
 export { default as DefaultTheme } from './styles/DefaultTheme';
+export { default as DarkTheme } from './styles/DarkTheme';
 
 export { default as Switch } from './components/Switch';
 export { default as Button } from './components/Button';
diff --git a/src/styles/DarkTheme.js b/src/styles/DarkTheme.js
new file mode 100644
index 0000000..37cdb00
--- /dev/null
+++ b/src/styles/DarkTheme.js
@@ -0,0 +1,28 @@
+/* @flow */
+
+import color from 'color';
+import _ from 'lodash';
+import DefaultTheme from './DefaultTheme';
+import { white, grey800, cyan500, cyan700 } from './colors';
+
+const DarkTheme = {
+  dark: true,
+  colors: {
+    primary: cyan500,
+    primaryDark: cyan700,
+    background: '#303030',
+    paper: grey800,
+    text: white,
+    secondaryText: color(white)
+      .alpha(0.7)
+      .rgbaString(),
+    disabled: color(white)
+      .alpha(0.5)
+      .rgbaString(),
+    placeholder: color(white)
+      .alpha(0.38)
+      .rgbaString(),
+  },
+};
+
+export default _.merge({}, DefaultTheme, DarkTheme);
diff --git a/src/styles/DefaultTheme.js b/src/styles/DefaultTheme.js
index e438a6f..7d97619 100644
--- a/src/styles/DefaultTheme.js
+++ b/src/styles/DefaultTheme.js
@@ -1,15 +1,18 @@
 /* @flow */
 
 import color from 'color';
-import { indigo500, indigo700, pinkA200, black } from './colors';
+import { indigo500, indigo700, pinkA200, black, white, grey50 } from './colors';
 import fonts from './fonts';
 
 export default {
+  dark: false,
   roundness: 2,
   colors: {
     primary: indigo500,
     primaryDark: indigo700,
     accent: pinkA200,
+    background: grey50,
+    paper: white,
     text: black,
     secondaryText: color(black)
       .alpha(0.7)
diff --git a/src/types/Theme.js b/src/types/Theme.js
index cd0cd71..5823103 100644
--- a/src/types/Theme.js
+++ b/src/types/Theme.js
@@ -1,10 +1,13 @@
 /* @flow */
 
 export type Theme = {
+  dark: boolean,
   roundness: number,
   colors: {
     primary: string,
     primaryDark: string,
+    background: string,
+    paper: string,
     accent: string,
     text: string,
     secondaryText: string,
diff --git a/yarn.lock b/yarn.lock
index 4997123..d3782e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -258,31 +258,7 @@ babel-code-frame@^6.26.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-core@^6.24.1, babel-core@^6.7.2:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
-  dependencies:
-    babel-code-frame "^6.22.0"
-    babel-generator "^6.25.0"
-    babel-helpers "^6.24.1"
-    babel-messages "^6.23.0"
-    babel-register "^6.24.1"
-    babel-runtime "^6.22.0"
-    babel-template "^6.25.0"
-    babel-traverse "^6.25.0"
-    babel-types "^6.25.0"
-    babylon "^6.17.2"
-    convert-source-map "^1.1.0"
-    debug "^2.1.1"
-    json5 "^0.5.0"
-    lodash "^4.2.0"
-    minimatch "^3.0.2"
-    path-is-absolute "^1.0.0"
-    private "^0.1.6"
-    slash "^1.0.0"
-    source-map "^0.5.0"
-
-babel-core@^6.26.0:
+babel-core@^6.24.1, babel-core@^6.26.0, babel-core@^6.7.2:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
   dependencies:
@@ -315,7 +291,7 @@ babel-eslint@^8.0.0:
     babel-types "7.0.0-beta.0"
     babylon "7.0.0-beta.22"
 
-babel-generator@^6.24.1, babel-generator@^6.25.0:
+babel-generator@^6.24.1:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.25.0.tgz#33a1af70d5f2890aeb465a4a7793c1df6a9ea9fc"
   dependencies:
@@ -715,15 +691,7 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
-babel-polyfill@^6.20.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
-  dependencies:
-    babel-runtime "^6.22.0"
-    core-js "^2.4.0"
-    regenerator-runtime "^0.10.0"
-
-babel-polyfill@^6.26.0:
+babel-polyfill@^6.20.0, babel-polyfill@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
   dependencies:
@@ -841,19 +809,7 @@ babel-preset-react-native@^2.0.0:
     babel-plugin-transform-regenerator "^6.5.0"
     react-transform-hmr "^1.0.4"
 
-babel-register@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.24.1.tgz#7e10e13a2f71065bdfad5a1787ba45bca6ded75f"
-  dependencies:
-    babel-core "^6.24.1"
-    babel-runtime "^6.22.0"
-    core-js "^2.4.0"
-    home-or-tmp "^2.0.0"
-    lodash "^4.2.0"
-    mkdirp "^0.5.1"
-    source-map-support "^0.4.2"
-
-babel-register@^6.26.0:
+babel-register@^6.24.1, babel-register@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
   dependencies:
@@ -865,14 +821,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@^6.0.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.10.0"
-
-babel-runtime@^6.26.0:
+babel-runtime@^6.0.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -888,17 +837,7 @@ babel-template@7.0.0-beta.0:
     babylon "7.0.0-beta.22"
     lodash "^4.2.0"
 
-babel-template@^6.24.1, babel-template@^6.25.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-traverse "^6.25.0"
-    babel-types "^6.25.0"
-    babylon "^6.17.2"
-    lodash "^4.2.0"
-
-babel-template@^6.26.0:
+babel-template@^6.24.1, babel-template@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
   dependencies:
@@ -922,7 +861,7 @@ babel-traverse@7.0.0-beta.0:
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-babel-traverse@^6.24.1, babel-traverse@^6.25.0:
+babel-traverse@^6.24.1:
   version "6.25.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1"
   dependencies:
@@ -958,16 +897,7 @@ babel-types@7.0.0-beta.0:
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.25.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e"
-  dependencies:
-    babel-runtime "^6.22.0"
-    esutils "^2.0.2"
-    lodash "^4.2.0"
-    to-fast-properties "^1.0.1"
-
-babel-types@^6.26.0:
+babel-types@^6.19.0, babel-types@^6.25.0, babel-types@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
   dependencies:
@@ -976,15 +906,24 @@ babel-types@^6.26.0:
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
+babel-types@^6.24.1:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e"
+  dependencies:
+    babel-runtime "^6.22.0"
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^1.0.1"
+
 babylon@7.0.0-beta.22:
   version "7.0.0-beta.22"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.22.tgz#74f0ad82ed7c7c3cfeab74cf684f815104161b65"
 
-babylon@^6.17.0, babylon@^6.17.2:
+babylon@^6.17.0:
   version "6.17.4"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a"
 
-babylon@^6.18.0:
+babylon@^6.17.2, babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
 
@@ -1358,7 +1297,7 @@ content-type@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"
 
-convert-source-map@^1.1.0, convert-source-map@^1.5.0:
+convert-source-map@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
 
@@ -1381,11 +1320,11 @@ core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
 
-core-js@^2.2.2, core-js@^2.4.0:
+core-js@^2.2.2:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
 
-core-js@^2.5.0:
+core-js@^2.4.0, core-js@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.0.tgz#569c050918be6486b3837552028ae0466b717086"
 
@@ -1453,7 +1392,7 @@ dateformat@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.0.0.tgz#2743e3abb5c3fc2462e527dca445e04e9f4dee17"
 
-debug@2.6.8, debug@^2.1.1, debug@^2.2.0, debug@^2.6.8:
+debug@2.6.8, debug@^2.2.0, debug@^2.6.8:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
   dependencies:
@@ -2502,14 +2441,10 @@ jest-docblock@20.1.0-chi.1:
   version "20.1.0-chi.1"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.1.0-chi.1.tgz#06981ab0e59498a2492333b0c5502a82e4603207"
 
-jest-docblock@20.1.0-delta.4:
+jest-docblock@20.1.0-delta.4, jest-docblock@^20.1.0-chi.1:
   version "20.1.0-delta.4"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.1.0-delta.4.tgz#360d4f5fb702730c4136c4e71e5706188a694682"
 
-jest-docblock@^20.1.0-chi.1:
-  version "20.1.0-echo.1"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.1.0-echo.1.tgz#be02f43ee019f97e6b83267c746ac7b40d290fe8"
-
 jest-docblock@^21.0.0:
   version "21.1.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.1.0.tgz#43154be2441fb91403e36bb35cb791a5017cea81"
@@ -2585,7 +2520,7 @@ json5@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.4.0.tgz#054352e4c4c80c86c0923877d449de176a732c8d"
 
-json5@^0.5.0, json5@^0.5.1:
+json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
 
@@ -3649,7 +3584,7 @@ regenerate@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
 
-regenerator-runtime@^0.10.0, regenerator-runtime@^0.10.5:
+regenerator-runtime@^0.10.5:
   version "0.10.5"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
 
@@ -3855,14 +3790,10 @@ sax@~1.1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.1.6.tgz#5d616be8a5e607d54e114afae55b7eaf2fcc3240"
 
-"semver@2 || 3 || 4 || 5", semver@5.x, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
+"semver@2 || 3 || 4 || 5", semver@5.x, semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
-semver@^5.0.1:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
-
 send@0.13.2:
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.13.2.tgz#765e7607c8055452bba6f0b052595350986036de"
@@ -3976,12 +3907,6 @@ source-map-support@^0.4.15:
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@^0.4.2:
-  version "0.4.15"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.15.tgz#03202df65c06d2bd8c7ec2362a193056fef8d3b1"
-  dependencies:
-    source-map "^0.5.6"
-
 source-map@^0.5.0, source-map@^0.5.6, source-map@~0.5.1:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
@@ -4372,13 +4297,7 @@ which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
-which@^1.2.14:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
-  dependencies:
-    isexe "^2.0.0"
-
-which@^1.2.9:
+which@^1.2.14, which@^1.2.9:
   version "1.2.14"
   resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
   dependencies: