feat: darkmode for time-picker&date-picker&card

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

@@ -33,6 +33,7 @@ import VarCard from '..'
 import context from '../../context'
 import { pack, use } from './locale'
 import { watchLang, watchPlatform } from '@varlet/cli/site/utils'
+import { watchDarkMode } from '../../utils/components'
 import { onUnmounted } from 'vue'
 
 export default {
@@ -44,6 +45,7 @@ export default {
   },
   setup() {
     watchLang(use)
+    watchDarkMode()
 
     const prevTouchmoveForbid = context.touchmoveForbid
     watchPlatform((platform) => {

packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap

@@ -14,15 +14,15 @@ exports[`test allowedDates prop 1`] = `
     <transition-stub>
       <div class=\\"var-day-picker__panel\\">
         <div class=\\"var-day-picker__content\\">
-          <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"color: rgba(0, 0, 0, 0.54);\\">
+          <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\">
               <!--v-if-->
               <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: all 0ms;\\"></i></div>
             </button>
             <div class=\\"var-picker-header__value\\">
               <transition-stub>
                 <div>2021 三月</div>
               </transition-stub>
-            </div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"color: rgba(0, 0, 0, 0.54);\\">
+            </div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\">
               <!--v-if-->
               <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: all 0ms;\\"></i></div>
             </button>
@@ -62,15 +62,15 @@ exports[`test datePicker style and type 1`] = `
     <transition-stub>
       <div class=\\"var-month-picker__panel\\">
         <div class=\\"var-month-picker__content\\">
-          <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"color: rgba(0, 0, 0, 0.54);\\">
+          <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\">
               <!--v-if-->
               <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: all 0ms;\\"></i></div>
             </button>
             <div class=\\"var-picker-header__value\\">
               <transition-stub>
                 <div>2021</div>
               </transition-stub>
-            </div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"color: rgba(0, 0, 0, 0.54);\\">
+            </div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\">
               <!--v-if-->
               <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: all 0ms;\\"></i></div>
             </button>
@@ -148,15 +148,15 @@ exports[`test datePicker style and type 2`] = `
     <transition-stub>
       <div class=\\"var-day-picker__panel\\">
         <div class=\\"var-day-picker__content\\">
-          <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"color: rgba(0, 0, 0, 0.54);\\">
+          <div class=\\"var-picker-header\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\">
               <!--v-if-->
               <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: all 0ms;\\"></i></div>
             </button>
             <div class=\\"var-picker-header__value\\">
               <transition-stub>
                 <div>2021 五月</div>
               </transition-stub>
-            </div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"color: rgba(0, 0, 0, 0.54);\\">
+            </div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\">
               <!--v-if-->
               <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: all 0ms;\\"></i></div>
             </button>

packages/varlet-ui/src/date-picker/date-picker.less

@@ -32,6 +32,7 @@
 @day-picker-head-item-color: rgba(0, 0, 0, 0.38);
 @day-picker-head-item-padding: 8px 0;
 @day-picker-head-item-font-weight: 600;
+@date-picker-body-background-color: rgba(0, 0, 0, 0);
 
 :root {
   --date-picker-border-radius: @date-picker-border-radius;
@@ -48,6 +49,7 @@
   --date-picker-title-date-font-size: @date-picker-title-date-font-size;
   --date-picker-title-date-font-weight: @date-picker-title-date-font-weight;
   --date-picker-title-date-range-font-size: @date-picker-title-date-range-font-size;
+  --date-picker-body-background-color: @date-picker-body-background-color;
   --picker-header-padding: @picker-header-padding;
   --month-picker-padding: @month-picker-padding;
   --month-picker-item-width: @month-picker-item-width;
@@ -141,6 +143,7 @@
     flex: 1;
     position: relative;
     overflow: auto;
+    background-color: var(--date-picker-body-background-color);
   }
 
   .var-picker-header {

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

@@ -49,6 +49,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarDatePicker from '..'
 import { pack, use } from './locale'
 import { watchLang } from '@varlet/cli/site/utils'
+import { watchDarkMode } from '../../utils/components'
 
 export default {
   name: 'DatePickerExample',
@@ -77,6 +78,7 @@ export default {
     }
 
     watchLang(use)
+    watchDarkMode()
 
     return {
       ...toRefs(dates),

packages/varlet-ui/src/date-picker/src/day-picker-panel.vue

@@ -49,6 +49,7 @@ import VarButton from '../../button'
 import { WEEK_HEADER } from '../props'
 import { toNumber } from '../../utils/shared'
 import { pack } from '../../locale'
+import { watchDarkMode } from '../../utils/components'
 import type { Ref, ComputedRef, UnwrapRef, PropType } from 'vue'
 import type { Choose, Preview, ComponentProps, Week, PanelBtnDisabled } from '../props'
 
@@ -226,12 +227,15 @@ export default defineComponent({
 
         return true
       }
-
+      const isDarkTheme = ref(false)
+      watchDarkMode((themes) => {
+        isDarkTheme.value = themes === 'darkThemes'
+      })
       const computeTextColor = (): string | undefined => {
         if (disabled) return ''
         if (computeOutline()) return color
         if (dayExist()) return ''
-        return 'rgba(0, 0, 0, .87)'
+        return isDarkTheme.value ? '#ffffff' : 'rgba(0, 0, 0, .87)'
       }
 
       return {

packages/varlet-ui/src/date-picker/src/month-picker-panel.vue

@@ -40,6 +40,7 @@ import PanelHeader from './panel-header.vue'
 import VarButton from '../../button'
 import { toNumber } from '../../utils/shared'
 import { pack } from '../../locale'
+import { watchDarkMode } from '../../utils/components'
 import type { Ref, ComputedRef, UnwrapRef, PropType } from 'vue'
 import type { Choose, Preview, ComponentProps, Month, PanelBtnDisabled } from '../props'
 
@@ -169,11 +170,16 @@ export default defineComponent({
         return true
       }
 
+      const isDarkTheme = ref(false)
+      watchDarkMode((themes) => {
+        isDarkTheme.value = themes === 'darkThemes'
+      })
+
       const computeTextColor = (): string | undefined => {
         if (disabled) return ''
         if (computeOutline()) return color
         if (monthExist()) return ''
-        return 'rgba(0, 0, 0, .87)'
+        return isDarkTheme.value ? '#ffffff' : 'rgba(0, 0, 0, .87)'
       }
 
       return {

packages/varlet-ui/src/date-picker/src/panel-header.vue

@@ -1,26 +1,14 @@
 <template>
   <div class="var-picker-header">
-    <var-button
-      round
-      text
-      :text-color="disabled.left ? '' : 'rgba(0, 0, 0, .54)'"
-      :disabled="disabled.left"
-      @click="checkDate('prev')"
-    >
+    <var-button round text :text-color="computedLeftTextColor" :disabled="disabled.left" @click="checkDate('prev')">
       <var-icon name="chevron-left" />
     </var-button>
     <div class="var-picker-header__value" @click="$emit('check-panel')">
       <transition :name="reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'">
         <div :key="showDate">{{ showDate }}</div>
       </transition>
     </div>
-    <var-button
-      round
-      text
-      :text-color="disabled.right ? '' : 'rgba(0, 0, 0, .54)'"
-      :disabled="disabled.right"
-      @click="checkDate('next')"
-    >
+    <var-button round text :text-color="computedRightTextColor" :disabled="disabled.right" @click="checkDate('next')">
       <var-icon name="chevron-right" />
     </var-button>
   </div>
@@ -32,6 +20,7 @@ import VarButton from '../../button'
 import VarIcon from '../../icon'
 import { toNumber } from '../../utils/shared'
 import { pack } from '../../locale'
+import { watchDarkMode } from '../../utils/components'
 import type { Ref, ComputedRef, PropType } from 'vue'
 import type { Preview, PanelBtnDisabled } from '../props'
 
@@ -83,11 +72,22 @@ export default defineComponent({
         forwardOrBackNum.value = 0
       }
     )
-
+    const isDarkTheme = ref(false)
+    watchDarkMode((themes) => {
+      isDarkTheme.value = themes === 'darkThemes'
+    })
+    const computedLeftTextColor = () => {
+      return props.disabled.left ? '' : isDarkTheme.value ? '' : 'rgba(0, 0, 0, .54)'
+    }
+    const computedRightTextColor = () => {
+      return props.disabled.left ? '' : isDarkTheme.value ? '' : 'rgba(0, 0, 0, .54)'
+    }
     return {
       reverse,
       showDate,
       checkDate,
+      computedLeftTextColor,
+      computedRightTextColor,
     }
   },
 })

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

@@ -0,0 +1,5 @@
+export default {
+  '--card-title-color': '#ffffff',
+  '--card-subtitle-color': '#aaaaaa',
+  '--card-description-color': '#aaaaaa',
+}

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

@@ -0,0 +1,5 @@
+export default {
+  '--date-picker-body-background-color': '#272727',
+  '--day-picker-head-item-color': '#aaaaaa',
+  '--card-description-color': '#aaaaaa',
+}

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

@@ -17,6 +17,9 @@ import input from './input'
 import select from './select'
 import radio from './radio'
 import checkbox from './checkbox'
+import card from './card'
+import timePicker from './timePicker'
+import datePicker from './datePicker'
 import { StyleVars } from '../../style-provider'
 
 export default {
@@ -49,4 +52,7 @@ export default {
   ...select,
   ...radio,
   ...checkbox,
+  ...card,
+  ...timePicker,
+  ...datePicker,
 } as StyleVars

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

@@ -0,0 +1,5 @@
+export default {
+  '--time-picker-clock-container-background': '#545454',
+  '--time-picker-body-background': '#403f3f',
+  '--time-picker-clock-item-disable-color': '#aaaaaa',
+}

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

@@ -46,6 +46,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarTimePicker from '..'
 import { pack, use } from './locale'
 import { watchLang } from '@varlet/cli/site/utils'
+import { watchDarkMode } from '../../utils/components'
 
 export default {
   name: 'TimePickerExample',
@@ -80,6 +81,7 @@ export default {
     }
 
     watchLang(use)
+    watchDarkMode()
 
     return {
       ...toRefs(dates),

packages/varlet-ui/src/time-picker/timePicker.less

@@ -31,6 +31,7 @@
 @time-picker-clock-item-active-background: var(--color-primary);
 @time-picker-clock-item-active-color: #fff;
 @time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26);
+@time-picker-body-background: #fff;
 @time-picker-inner-left: 36px;
 @time-picker-inner-right: 36px;
 @time-picker-inner-top: 36px;
@@ -74,6 +75,7 @@
   --time-picker-inner-right: @time-picker-inner-right;
   --time-picker-inner-top: @time-picker-inner-top;
   --time-picker-inner-bottom: @time-picker-inner-bottom;
+  --time-picker-body-background: @time-picker-body-background;
 }
 
 // Mixins
@@ -138,6 +140,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: var(--time-picker-body-background);
   }
 
   &-clock {