Add HOC for theme

index.js

@@ -1,6 +1,7 @@
 /* @flow */
 
 export { default as ThemeProvider } from './src/core/ThemeProvider';
+export { default as withTheme } from './src/core/withTheme';
 
 export * as Colors from './src/styles/colors.js';
 

src/core/ThemeProvider.js

@@ -7,6 +7,8 @@ import {
 } from 'react';
 import DefaultTheme from '../styles/DefaultTheme';
 
+export const theme = 'react-native-paper$theme';
+
 export default class ThemeProvider extends Component {
 
   static propTypes = {
@@ -15,12 +17,12 @@ export default class ThemeProvider extends Component {
   };
 
   static childContextTypes = {
-    theme: PropTypes.object,
+    [theme]: PropTypes.object,
   };
 
   getChildContext() {
     return {
-      theme: this.props.theme || DefaultTheme,
+      [theme]: this.props.theme || DefaultTheme,
     };
   }
 

src/core/withTheme.js

@@ -0,0 +1,25 @@
+/* @flow */
+
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+import { theme } from './ThemeProvider';
+
+export default function withTheme<T>(Comp: ReactClass<T>): ReactClass<T> {
+
+  const name = Comp.displayName || Comp.name;
+
+  return class extends Component {
+
+    static displayName = `Themed${name}`;
+
+    static contextTypes = {
+      [theme]: PropTypes.object,
+    };
+
+    render() {
+      return <Comp theme={this.context[theme]} {...this.props} />;
+    }
+  };
+}

src/styles/DefaultTheme.js

@@ -7,7 +7,9 @@ import {
 } from './colors';
 
 export default {
-  primaryColor: indigo500,
-  primaryDarkColor: indigo700,
-  accentColor: pinkA200,
+  colors: {
+    primary: indigo500,
+    primaryDark: indigo700,
+    accent: pinkA200,
+  },
 };