refactor(mixins/textransparentable): support theme change

packages/mixins/texttransparentable.js

@@ -1,10 +1,46 @@
 export default {
+  watch: {
+    synthesizedTheme () {
+      this.$nextTick().then(() => {
+        document.querySelector('head').removeChild(this.cssNode)
+        this.setCSSNode()
+        document.querySelector('head').appendChild(this.cssNode)
+      })
+    }
+  },
   data () {
     return {
       ascendantBackgroundColor: null,
       cssNode: null
     }
   },
+  methods: {
+    setCSSNode () {
+      let cursor = this.$el
+      while (cursor.parentElement) {
+        cursor = cursor.parentElement
+        const backgroundColor = getComputedStyle(cursor).backgroundColor
+        if (backgroundColor && backgroundColor !== 'rgba(0, 0, 0, 0)') {
+          this.ascendantBackgroundColor = backgroundColor
+          break
+        }
+      }
+      const id = 'x' + Math.random().toString(16).slice(9)
+      this.$el.setAttribute('n-background-id', id)
+      this.cssNode = document.createElement('style')
+      this.cssNode.innerHTML = `[n-background-id=${id}] .simulate-transparent-text {
+    color: ${this.ascendantBackgroundColor}!important;
+  }
+  [n-background-id=${id}] .simulate-transparent-background {
+    background-color: ${this.ascendantBackgroundColor}!important;
+  }
+  [n-background-id=${id}] .simulate-transparent-stroke circle {
+    stroke: ${this.ascendantBackgroundColor}!important;
+  }
+  `
+      this.cssNode.type = 'text/css'
+    }
+  },
   mounted () {
     let cursor = this.$el
     while (cursor.parentElement) {