Add a support for reactive theme

Author: zaxozhu

README.md

@@ -155,6 +155,8 @@ export default StyledButton;
 
 `vue-styled-components` has full theming support by exporting a `<ThemeProvider>` wrapper component. This component provides a theme to all `Vue` components underneath itself via the context API. In the render tree all `vue-styled-components` will have access to the provided theme, even when they are multiple levels deep.
 
+ThemeProvider supports reactive theme, i.e. it can be derived via vuex and changed over the time.
+
 Remember to register `ThemeProvider` locally.
 
 ```JSX

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) {