feat: export dark theme and playground support dark theme preview

varletjs · Sep 18, 2022 · cede810 · cede810
1 parent c675b67
commit cede810
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 4 deletions.
diff --git a/packages/varlet-ui-playground/index.html b/packages/varlet-ui-playground/index.html
@@ -9,10 +9,6 @@
     <script>
       // process shim for old versions of @vue/compiler-sfc dependency
       window.process = { env: {} }
-      const saved = localStorage.getItem('varlet-ui-playground-prefer-dark')
-      if (saved !== 'false') {
-        document.documentElement.classList.add('dark')
-      }
     </script>
     <script type="module" src="./src/main.ts"></script>
   </head>

diff --git a/packages/varlet-ui-playground/src/Header.vue b/packages/varlet-ui-playground/src/Header.vue
@@ -6,6 +6,7 @@ import Share from './icons/Share.vue'
 import Download from './icons/Download.vue'
 import { downloadProject } from './download/download'
 import { Snackbar } from '@varlet/ui'
+import { onMounted } from 'vue'
 
 // eslint-disable-next-line no-undef
 const props = defineProps(['store'])
@@ -19,7 +20,29 @@ function toggleDark() {
   const cls = document.documentElement.classList
   cls.toggle('dark')
   localStorage.setItem('varlet-ui-playground-prefer-dark', String(cls.contains('dark')))
+
+  notifyIframeThemeChange()
+}
+
+function notifyIframeThemeChange() {
+  setTimeout(() => {
+    window[0].postMessage({
+      action: 'theme-change',
+      value: document.documentElement.classList.contains('dark') ? 'dark' : 'light',
+    })
+  })
 }
+
+onMounted(() => {
+  const cls = document.documentElement.classList
+
+  const saved = localStorage.getItem('varlet-ui-playground-prefer-dark')
+  if (saved !== 'false') {
+    cls.add('dark')
+  }
+
+  notifyIframeThemeChange()
+})
 </script>
 
 <template>

diff --git a/packages/varlet-ui-playground/src/store.ts b/packages/varlet-ui-playground/src/store.ts
@@ -41,6 +41,22 @@ Context.touchmoveForbid = false
 await appendStyle()
 
 export function installVarletUI() {
+  const { parent } = window
+
+  document.body.style.minHeight = '100vh'
+  document.body.style.color = 'var(--color-text)'
+  document.body.style.backgroundColor = 'var(--color-body)'
+
+  if (parent.document.documentElement.classList.contains('dark')) {
+    VarletUI.StyleProvider(VarletUI.Themes.dark)
+  }
+
+  window.addEventListener('message', ({ data }) => {
+    if (data.action === 'theme-change') {
+      VarletUI.StyleProvider(data.value === 'dark' ? VarletUI.Themes.dark : null)
+    }
+  })
+
   const instance = getCurrentInstance()
   instance.appContext.app.use(VarletUI)
 }

diff --git a/packages/varlet-ui/src/themes/index.ts b/packages/varlet-ui/src/themes/index.ts
@@ -0,0 +1,3 @@
+import dark from './dark'
+
+export default { dark }