feat(picker): picker support dark mode

affects: @varlet/ui

packages/varlet-ui/src/picker/example/index.vue

@@ -19,6 +19,7 @@ import context from '../../context'
 import { onUnmounted, ref } from 'vue'
 import { use, pack } from './locale'
 import { watchLang, watchPlatform } from '@varlet/cli/site/utils'
+import { watchDarkMode } from '../../utils/components'
 
 export default {
   name: 'PickerExample',
@@ -54,6 +55,7 @@ export default {
     }
 
     watchLang(use)
+    watchDarkMode()
 
     const prevTouchmoveForbid = context.touchmoveForbid
     watchPlatform((platform) => {

packages/varlet-ui/src/themes/dark/index.ts

@@ -1,29 +1,30 @@
+import { StyleVars } from '../../style-provider'
+import actionSheet from './actionSheet'
+import badge from './badge'
 import button from './button'
-import cell from './cell'
 import card from './card'
-import timePicker from './timePicker'
-import datePicker from './datePicker'
-import skeleton from './skeleton'
-import tab from './tab'
-import tabItem from './tab-item'
-import popup from './popup'
-import dialog from './dialog'
-import actionSheet from './actionSheet'
+import cell from './cell'
+import checkbox from './checkbox'
 import chip from './chip'
-import badge from './badge'
-import uploader from './uploader'
 import collapse from './collapse'
+import datePicker from './datePicker'
+import dialog from './dialog'
+import divider from './divider'
+import input from './input'
+import pagination from './pagination'
+import picker from './picker'
+import popup from './popup'
 import pullRefresh from './pullRefresh'
-import switchThemes from './switch'
+import radio from './radio'
+import select from './select'
+import skeleton from './skeleton'
 import steps from './steps'
-import pagination from './pagination'
+import switchThemes from './switch'
+import tab from './tab'
+import tabItem from './tab-item'
 import table from './table'
-import input from './input'
-import select from './select'
-import radio from './radio'
-import checkbox from './checkbox'
-import divider from './divider'
-import { StyleVars } from '../../style-provider'
+import timePicker from './timePicker'
+import uploader from './uploader'
 
 export default {
   // common
@@ -61,4 +62,5 @@ export default {
   ...radio,
   ...checkbox,
   ...divider,
+  ...picker,
 } as StyleVars

packages/varlet-ui/src/themes/dark/picker.ts

@@ -0,0 +1,4 @@
+export default {
+  '--picker-background': '#272727',
+  '--picker-mask-background-image': `linear-gradient(180deg, hsl(0deg 0% 15%), hsl(0deg 7% 14% / 40%)), linear-gradient(0deg, hsl(0deg 0% 15%), hsl(0deg 7% 14% / 40%))`,
+}