fix(ui/style-provider): simplify the use of style-provider

affects: @varlet/ui
varletjs · Nov 3, 2021 · cbf66ce · cbf66ce
1 parent c7dcfe0
commit cbf66ce
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 57 deletions.
diff --git a/packages/varlet-ui/src/style-provider/docs/en-US.md b/packages/varlet-ui/src/style-provider/docs/en-US.md
@@ -85,24 +85,17 @@ export default {
       score: 5,
       license: true,
     })
-    const primaryTheme = {
-      '--theme-name': 'primary',
-      '--rate-primary-color': 'var(--color-primary)',
-      '--button-primary-color': 'var(--color-primary)',
-      '--switch-handle-active-background': 'var(--color-primary)',
-      '--switch-track-active-background': 'var(--color-primary)',
-    }
+
     const successTheme = {
-      '--theme-name': 'success',
       '--rate-primary-color': 'var(--color-success)',
       '--button-primary-color': 'var(--color-success)',
       '--switch-handle-active-background': 'var(--color-success)',
       '--switch-track-active-background': 'var(--color-success)',
     }
-    const styleVars = ref(primaryTheme)
+    const styleVars = ref(null)
 
     const toggleTheme = () => {
-      styleVars.value = styleVars.value['--theme-name'] === 'primary' ? successTheme : primaryTheme
+      styleVars.value = styleVars.value ? null : successTheme
     }
 
     return {
@@ -125,15 +118,15 @@ A functional call is to update variables directly on `:root`, which is suitable
 ```js
 export default {
   setup() {
+    let rootStyleVars = null
+
+    const darkTheme = {
+      '--color-primary': '#000'
+    }
+
     const toggleRootTheme = () => {
-      const color = window
-        .getComputedStyle(document.documentElement)
-        .getPropertyValue('--color-primary')
-        .trim()
-
-      StyleProvider({
-        '--color-primary': color === '#3a7afe' ? '#000' : '#3a7afe',
-      })
+      rootStyleVars = rootStyleVars ? null : darkTheme
+      StyleProvider(rootStyleVars)
     }
 
     return { toggleRootTheme }

diff --git a/packages/varlet-ui/src/style-provider/docs/zh-CN.md b/packages/varlet-ui/src/style-provider/docs/zh-CN.md
@@ -82,24 +82,17 @@ export default {
       score: 5,
       license: true,
     })
-    const primaryTheme = {
-      '--theme-name': 'primary',
-      '--rate-primary-color': 'var(--color-primary)',
-      '--button-primary-color': 'var(--color-primary)',
-      '--switch-handle-active-background': 'var(--color-primary)',
-      '--switch-track-active-background': 'var(--color-primary)',
-    }
+
     const successTheme = {
-      '--theme-name': 'success',
       '--rate-primary-color': 'var(--color-success)',
       '--button-primary-color': 'var(--color-success)',
       '--switch-handle-active-background': 'var(--color-success)',
       '--switch-track-active-background': 'var(--color-success)',
     }
-    const styleVars = ref(primaryTheme)
+    const styleVars = ref(null)
 
     const toggleTheme = () => {
-      styleVars.value = styleVars.value['--theme-name'] === 'primary' ? successTheme : primaryTheme
+      styleVars.value = styleVars.value ? null : successTheme
     }
 
     return {
@@ -122,15 +115,15 @@ export default {
 ```js
 export default {
   setup() {
+    let rootStyleVars = null
+
+    const darkTheme = {
+      '--color-primary': '#000'
+    }
+
     const toggleRootTheme = () => {
-      const color = window
-        .getComputedStyle(document.documentElement)
-        .getPropertyValue('--color-primary')
-        .trim()
-
-      StyleProvider({
-        '--color-primary': color === '#3a7afe' ? '#000' : '#3a7afe',
-      })
+      rootStyleVars = rootStyleVars ? null : darkTheme
+      StyleProvider(rootStyleVars)
     }
 
     return { toggleRootTheme }

diff --git a/packages/varlet-ui/src/style-provider/example/index.vue b/packages/varlet-ui/src/style-provider/example/index.vue
@@ -35,31 +35,29 @@ export default {
       score: 5,
       license: true,
     })
-    const primaryTheme = {
-      '--theme-name': 'primary',
-      '--rate-primary-color': 'var(--color-primary)',
-      '--button-primary-color': 'var(--color-primary)',
-      '--switch-handle-active-background': 'var(--color-primary)',
-      '--switch-track-active-background': 'var(--color-primary)',
-    }
+
+    const styleVars = ref(null)
+
     const successTheme = {
-      '--theme-name': 'success',
       '--rate-primary-color': 'var(--color-success)',
       '--button-primary-color': 'var(--color-success)',
       '--switch-handle-active-background': 'var(--color-success)',
       '--switch-track-active-background': 'var(--color-success)',
     }
-    const styleVars = ref(primaryTheme)
 
     const toggleTheme = () => {
-      styleVars.value = styleVars.value['--theme-name'] === 'primary' ? successTheme : primaryTheme
+      styleVars.value = styleVars.value ? null : successTheme
+    }
+
+    let rootStyleVars = null
+
+    const darkTheme = {
+      '--color-primary': '#000',
     }
 
     const toggleRootTheme = () => {
-      const color = window.getComputedStyle(document.documentElement).getPropertyValue('--color-primary').trim()
-      StyleProvider({
-        '--color-primary': color === '#3a7afe' ? '#000' : '#3a7afe',
-      })
+      rootStyleVars = rootStyleVars ? null : darkTheme
+      StyleProvider(rootStyleVars)
     }
 
     watchLang(use)
@@ -74,11 +72,7 @@ export default {
       context.touchmoveForbid = prevTouchmoveForbid
     })
 
-    onUnmounted(() => {
-      StyleProvider({
-        '--color-primary': '#3a7afe',
-      })
-    })
+    onUnmounted(() => StyleProvider(null))
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/style-provider/index.ts b/packages/varlet-ui/src/style-provider/index.ts
@@ -4,9 +4,17 @@ import { formatStyleVars } from '../utils/elements'
 
 export type StyleVars = Record<string, string>
 
+const mountedVarKeys: string[] = []
+
 function StyleProvider(styleVars: StyleVars = {}) {
+  mountedVarKeys.forEach((key) => document.documentElement.style.removeProperty(key))
+  mountedVarKeys.length = 0
+
   const styles: StyleVars = formatStyleVars(styleVars)
-  Object.entries(styles).forEach(([key, value]) => document.documentElement.style.setProperty(key, value))
+  Object.entries(styles).forEach(([key, value]) => {
+    document.documentElement.style.setProperty(key, value)
+    mountedVarKeys.push(key)
+  })
 }
 
 StyleProvider.Component = VarStyleProvider

diff --git a/packages/varlet-ui/src/utils/elements.ts b/packages/varlet-ui/src/utils/elements.ts
@@ -206,7 +206,7 @@ export function scrollTo(
 }
 
 export function formatStyleVars(styleVars: StyleVars) {
-  return Object.entries(styleVars).reduce((styles, [key, value]) => {
+  return Object.entries(styleVars ?? {}).reduce((styles, [key, value]) => {
     const cssVar = key.startsWith('--') ? key : `--${kebabCase(key)}`
     styles[cssVar] = value