From 12535c2ee9bde3ee3094bd07110032e8bcbf9ed1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Perico=20Gonz=C3=A1lez-Santiago=20Gonz=C3=A1lez?=
 <perico.gonzalezsantiago@gmail.com>
Date: Tue, 25 Jan 2022 22:18:09 +0100
Subject: [PATCH] feat: make theme injection reactive

---
 src/models/StyledComponent.js  | 6 ++++--
 src/providers/ThemeProvider.js | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/models/StyledComponent.js b/src/models/StyledComponent.js
index 80420ec..4d6aecf 100644
--- a/src/models/StyledComponent.js
+++ b/src/models/StyledComponent.js
@@ -1,4 +1,4 @@
-import { h, inject } from 'vue'
+import { computed, h, inject } from 'vue'
 import css from '../constructors/css'
 import isVueComponent from '../utils/isVueComponent'
 import normalizeProps from '../utils/normalizeProps'
@@ -30,8 +30,10 @@ export default (ComponentStyle) => {
       setup (props, { slots, attrs, emit }) {
         const theme = inject('theme')
 
+        const finalTheme = computed(() => theme && theme.value ? theme.value : theme)
+
         return () => {
-          const styleClass = componentStyle.generateAndInjectStyles({ theme, ...props, ...attrs })
+          const styleClass = componentStyle.generateAndInjectStyles({ theme: finalTheme.value, ...props, ...attrs })
           const classes = [styleClass]
 
           if (attrs.class) {
diff --git a/src/providers/ThemeProvider.js b/src/providers/ThemeProvider.js
index f2405bd..893dc27 100644
--- a/src/providers/ThemeProvider.js
+++ b/src/providers/ThemeProvider.js
@@ -1,11 +1,13 @@
-import { h, provide } from 'vue'
+import { h, provide, toRefs } from 'vue'
 
 export default {
   props: {
     theme: Object
   },
-  setup (props, { slots }) {
-    provide('theme', props.theme)
+  setup (props) {
+    const { theme } = toRefs(props)
+
+    provide('theme', theme)
   },
 
   render () {