Merged #81

Author: liqueflies

README.md

@@ -172,7 +172,7 @@ Remember to register `ThemeProvider` locally.
 Add your `ThemeProvider` component:
 
 ```JSX
-  <theme-provider theme="{
+  <theme-provider :theme="{
     primary: 'palevioletred'
   }">
     <wrapper>

src/models/StyledComponent.js

@@ -8,11 +8,7 @@ export default (ComponentStyle) => {
     const componentStyle = new ComponentStyle(rules)
 
     const StyledComponent = {
-      inject: {
-        theme: {
-          default: {}
-        }
-      },
+      inject: ['$theme'],
       props: mergedProps,
       render: function (createElement) {
         const children = []
@@ -47,6 +43,13 @@ export default (ComponentStyle) => {
         generatedClassName () {
           const componentProps = Object.assign({ theme: this.theme }, this.$props)
           return this.generateAndInjectStyles(componentProps)
+        },
+        theme () {
+          return this.$theme
+            ? this.$theme()
+            : {
+              default: {}
+            }
         }
       },
       extend (extendedRules) {

src/providers/ThemeProvider.js

@@ -5,7 +5,7 @@ export default {
   },
   provide () {
     return {
-      theme: this.theme
+      $theme: () => this.theme
     }
   },
   render: function (createElement) {