fix(ui,cli): move dark theme import to example

affects: @varlet/cli, @varlet/ui
varletjs · Nov 18, 2021 · 579e461 · 579e461
1 parent 7ce8bae
commit 579e461
Show file tree

Hide file tree

Showing 50 changed files with 100 additions and 52 deletions.
diff --git a/packages/varlet-cli/site/utils.ts b/packages/varlet-cli/site/utils.ts
@@ -1,7 +1,6 @@
 import { onMounted, onUnmounted } from 'vue'
 import { get } from 'lodash-es'
 import { formatStyleVars } from './components/utils/elements'
-import dark from '@varlet/ui/src/themes/dark'
 
 export * from './components/utils/components'
 export * from './components/utils/elements'
@@ -150,7 +149,7 @@ export function getBrowserThemes(): 'darkThemes' | 'themes' {
   return currentThemes
 }
 
-export function watchDarkMode(cb?: (themes: 'darkThemes' | 'themes') => void) {
+export function watchDarkMode(dark: StyleVars, cb?: (themes: 'darkThemes' | 'themes') => void) {
   watchThemes((themes) => {
     StyleProvider(themes === 'darkThemes' ? dark : null)
 

diff --git a/packages/varlet-ui/src/action-sheet/example/index.vue b/packages/varlet-ui/src/action-sheet/example/index.vue
@@ -29,6 +29,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarButton from '../../button'
 import Snackbar from '../../snackbar'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { ref, reactive, onUnmounted } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
@@ -163,7 +164,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/app-bar/example/index.vue b/packages/varlet-ui/src/app-bar/example/index.vue
@@ -64,6 +64,7 @@ import Snackbar from '../../snackbar'
 import VarMenu from '../../menu'
 import VarButton from '../../button'
 import VarCell from '../../cell'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -112,7 +113,7 @@ export default {
       offsetY.value = false
     })
 
-    watchDarkMode((themes) => {
+    watchDarkMode(dark, (themes) => {
       bgColor.value = themes === 'darkThemes' ? '#272727' : '#fff'
     })
 

diff --git a/packages/varlet-ui/src/back-top/example/index.vue b/packages/varlet-ui/src/back-top/example/index.vue
@@ -8,6 +8,7 @@
 <script>
 import VarBackTop from '..'
 import VarCell from '../../cell'
+import dark from '../../themes/dark'
 import { watchDarkMode } from '@varlet/cli/site/utils'
 
 const lists = [...Array(100).keys()]
@@ -19,7 +20,7 @@ export default {
     VarCell,
   },
   setup() {
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       lists,

diff --git a/packages/varlet-ui/src/badge/example/index.vue b/packages/varlet-ui/src/badge/example/index.vue
@@ -59,6 +59,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarBadge from '..'
 import VarButton from '../../button'
 import VarChip from '../../chip'
+import dark from '../../themes/dark'
 import { ref } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -82,7 +83,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       value,

diff --git a/packages/varlet-ui/src/button/example/index.vue b/packages/varlet-ui/src/button/example/index.vue
@@ -66,6 +66,7 @@ import VarIcon from '../../icon'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Snackbar from '../../snackbar'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
 import { onUnmounted } from 'vue'
@@ -86,7 +87,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     const prevTouchmoveForbid = context.touchmoveForbid
     watchPlatform((platform) => {

diff --git a/packages/varlet-ui/src/card/example/index.vue b/packages/varlet-ui/src/card/example/index.vue
@@ -31,6 +31,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarButton from '../../button'
 import VarCard from '..'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
 import { onUnmounted } from 'vue'
@@ -44,7 +45,7 @@ export default {
   },
   setup() {
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     const prevTouchmoveForbid = context.touchmoveForbid
     watchPlatform((platform) => {

diff --git a/packages/varlet-ui/src/cell/example/index.vue b/packages/varlet-ui/src/cell/example/index.vue
@@ -37,6 +37,7 @@
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarIcon from '../../icon'
 import VarCell from '..'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -49,7 +50,7 @@ export default {
   },
   setup() {
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/checkbox-group/example/index.vue b/packages/varlet-ui/src/checkbox-group/example/index.vue
@@ -54,6 +54,7 @@ import VarCheckbox from '../../checkbox'
 import VarIcon from '../../icon'
 import VarButton from '../../button'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -81,7 +82,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/chip/example/index.vue b/packages/varlet-ui/src/chip/example/index.vue
@@ -66,6 +66,7 @@
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarChip from '..'
 import VarIcon from '../../icon'
+import dark from '../../themes/dark'
 import { ref } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -82,7 +83,7 @@ export default {
     const show1 = ref(true)
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       show,

diff --git a/packages/varlet-ui/src/collapse/example/index.vue b/packages/varlet-ui/src/collapse/example/index.vue
@@ -54,6 +54,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarCollapse from '..'
 import VarCollapseItem from '../../collapse-item'
 import VarButton from '../../button'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -81,7 +82,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       ...toRefs(values),

diff --git a/packages/varlet-ui/src/countdown/example/index.vue b/packages/varlet-ui/src/countdown/example/index.vue
@@ -39,6 +39,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarCountdown from '..'
 import Snackbar from '../../snackbar'
 import VarButton from '../../button'
+import dark from '../../themes/dark'
 import { ref } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -63,7 +64,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       time,

diff --git a/packages/varlet-ui/src/counter/example/index.vue b/packages/varlet-ui/src/counter/example/index.vue
@@ -32,6 +32,7 @@
 <script>
 import VarCounter from '..'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -62,7 +63,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/date-picker/example/index.vue b/packages/varlet-ui/src/date-picker/example/index.vue
@@ -44,9 +44,10 @@
 </template>
 
 <script>
-import { reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarDatePicker from '..'
+import dark from '../../themes/dark'
+import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -77,7 +78,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       ...toRefs(dates),

diff --git a/packages/varlet-ui/src/date-picker/src/panel-header.vue b/packages/varlet-ui/src/date-picker/src/panel-header.vue
@@ -31,6 +31,7 @@
 <script lang="ts">
 import VarButton from '../../button'
 import VarIcon from '../../icon'
+import dark from '../../themes/dark'
 import { defineComponent, ref, computed, watch } from 'vue'
 import { toNumber } from '../../utils/shared'
 import { pack } from '../../locale'

diff --git a/packages/varlet-ui/src/dialog/example/index.vue b/packages/varlet-ui/src/dialog/example/index.vue
@@ -39,6 +39,7 @@ import VarIcon from '../../icon'
 import Snackbar from '../../snackbar'
 import VarCell from '../../cell'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -105,7 +106,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/divider/example/index.vue b/packages/varlet-ui/src/divider/example/index.vue
@@ -39,6 +39,7 @@
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarDivider from '..'
 import VarIcon from '../../icon'
+import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -51,7 +52,7 @@ export default {
   },
   setup() {
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/form/example/index.vue b/packages/varlet-ui/src/form/example/index.vue
@@ -82,6 +82,7 @@ import VarCounter from '../../counter'
 import VarRate from '../../rate'
 import AppType from '@varlet/cli/site/mobile/components/AppType.vue'
 import context from '../../context'
+import dark from '../../themes/dark'
 import { onUnmounted, reactive, ref } from 'vue'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -138,7 +139,7 @@ export default {
       use(lang)
       form.value?.reset()
     })
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/icon/example/index.vue b/packages/varlet-ui/src/icon/example/index.vue
@@ -52,6 +52,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import context from '../../context'
 import Clipboard from 'clipboard'
 import icons from '@varlet/icons'
+import dark from '../../themes/dark'
 import { reactive, onMounted, ref, onUnmounted } from 'vue'
 import { use, pack } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
@@ -83,7 +84,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode((themes) => {
+    watchDarkMode(dark, (themes) => {
       background.value = themes === 'darkThemes' ? '#272727' : '#fff'
     })
 

diff --git a/packages/varlet-ui/src/index-bar/example/index.vue b/packages/varlet-ui/src/index-bar/example/index.vue
@@ -11,10 +11,11 @@
 </template>
 
 <script>
-import { ref, onMounted } from 'vue'
 import VarIndexAnchor from '../../index-anchor/IndexAnchor.vue'
 import VarIndexBar from '..'
 import VarCell from '../../cell'
+import dark from '../../themes/dark'
+import { ref, onMounted } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
@@ -41,7 +42,7 @@ export default {
     }
 
     watchLang(use)
-    watchDarkMode((themes) => {
+    watchDarkMode(dark, (themes) => {
       bgColor.value = themes === 'darkThemes' ? 'rgb(41 42 45)' : '#e7edf7'
       color.value = themes === 'darkThemes' ? '#3980e8' : '#2e67ba'
     })

diff --git a/packages/varlet-ui/src/input/example/index.vue b/packages/varlet-ui/src/input/example/index.vue
@@ -40,6 +40,7 @@
 import VarInput from '..'
 import VarIcon from '../../icon'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { use, pack } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
@@ -68,7 +69,7 @@ export default {
       use(lang)
       values.value5 = pack.value.clearableText
     })
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/list/example/index.vue b/packages/varlet-ui/src/list/example/index.vue
@@ -38,6 +38,7 @@ import VarTabs from '../../tabs'
 import VarTab from '../../tab'
 import VarTabsItems from '../../tabs-items'
 import VarTabItem from '../../tab-item'
+import dark from '../../themes/dark'
 import { reactive, toRefs } from 'vue'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
@@ -68,7 +69,7 @@ export default {
     })
 
     watchLang(use)
-    watchDarkMode()
+    watchDarkMode(dark)
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/menu/example/index.vue b/packages/varlet-ui/src/menu/example/index.vue
@@ -114,6 +114,7 @@ import context from '../../context'
 import { onUnmounted, reactive, toRefs, ref } from 'vue'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet/cli/site/utils'
+import dark from '../../themes/dark'
 
 export default {
   name: 'MenuExample',
@@ -136,7 +137,7 @@ export default {
     const bgColor = ref('#fff')
 
     watchLang(use)
-    watchDarkMode((themes) => {
+    watchDarkMode(dark, (themes) => {
       bgColor.value = themes === 'darkThemes' ? '#272727' : '#fff'
     })