From df633e97c2529ddd9789c1e61a06e9b28c4cf19c Mon Sep 17 00:00:00 2001
From: wangweiguo_v <wangweiguo_v@didiglobal.com>
Date: Sat, 13 Nov 2021 21:40:22 +0800
Subject: [PATCH] feat: darkmode for time-picker&date-picker&card

---
 packages/varlet-ui/src/card/example/index.vue |  2 ++
 .../__snapshots__/index.spec.js.snap          | 12 ++++----
 .../src/date-picker/date-picker.less          |  3 ++
 .../src/date-picker/example/index.vue         |  2 ++
 .../src/date-picker/src/day-picker-panel.vue  |  8 +++--
 .../date-picker/src/month-picker-panel.vue    |  8 ++++-
 .../src/date-picker/src/panel-header.vue      | 30 +++++++++----------
 packages/varlet-ui/src/themes/dark/card.ts    |  5 ++++
 .../varlet-ui/src/themes/dark/datePicker.ts   |  5 ++++
 packages/varlet-ui/src/themes/dark/index.ts   |  6 ++++
 .../varlet-ui/src/themes/dark/timePicker.ts   |  5 ++++
 .../src/time-picker/example/index.vue         |  2 ++
 .../varlet-ui/src/time-picker/timePicker.less |  3 ++
 13 files changed, 67 insertions(+), 24 deletions(-)
 create mode 100644 packages/varlet-ui/src/themes/dark/card.ts
 create mode 100644 packages/varlet-ui/src/themes/dark/datePicker.ts
 create mode 100644 packages/varlet-ui/src/themes/dark/timePicker.ts

diff --git a/packages/varlet-ui/src/card/example/index.vue b/packages/varlet-ui/src/card/example/index.vue
index 031cc0e6437..2117fdd3519 100644
--- a/packages/varlet-ui/src/card/example/index.vue
+++ b/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) => {
diff --git a/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
index 8e7b708ecb5..5313c68341c 100644
--- a/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/date-picker/__tests__/__snapshots__/index.spec.js.snap
@@ -14,7 +14,7 @@ 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>
@@ -22,7 +22,7 @@ exports[`test allowedDates prop 1`] = `
               <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,7 +62,7 @@ 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>
@@ -70,7 +70,7 @@ exports[`test datePicker style and type 1`] = `
               <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,7 +148,7 @@ 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>
@@ -156,7 +156,7 @@ exports[`test datePicker style and type 2`] = `
               <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>
diff --git a/packages/varlet-ui/src/date-picker/date-picker.less b/packages/varlet-ui/src/date-picker/date-picker.less
index 2a6b05349b2..17c7faa7a5a 100644
--- a/packages/varlet-ui/src/date-picker/date-picker.less
+++ b/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 {
diff --git a/packages/varlet-ui/src/date-picker/example/index.vue b/packages/varlet-ui/src/date-picker/example/index.vue
index b079e4e0774..b9e2727c442 100644
--- a/packages/varlet-ui/src/date-picker/example/index.vue
+++ b/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),
diff --git a/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue b/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue
index 15303996806..9e3f82eaf97 100644
--- a/packages/varlet-ui/src/date-picker/src/day-picker-panel.vue
+++ b/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 {
diff --git a/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue b/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue
index a15e4e7004c..53fbff694ed 100644
--- a/packages/varlet-ui/src/date-picker/src/month-picker-panel.vue
+++ b/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 {
diff --git a/packages/varlet-ui/src/date-picker/src/panel-header.vue b/packages/varlet-ui/src/date-picker/src/panel-header.vue
index fe2d76fd53e..25341beea6b 100644
--- a/packages/varlet-ui/src/date-picker/src/panel-header.vue
+++ b/packages/varlet-ui/src/date-picker/src/panel-header.vue
@@ -1,12 +1,6 @@
 <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')">
@@ -14,13 +8,7 @@
         <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,
     }
   },
 })
diff --git a/packages/varlet-ui/src/themes/dark/card.ts b/packages/varlet-ui/src/themes/dark/card.ts
new file mode 100644
index 00000000000..6e12dd9faaa
--- /dev/null
+++ b/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',
+}
diff --git a/packages/varlet-ui/src/themes/dark/datePicker.ts b/packages/varlet-ui/src/themes/dark/datePicker.ts
new file mode 100644
index 00000000000..30d2bab1fbc
--- /dev/null
+++ b/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',
+}
diff --git a/packages/varlet-ui/src/themes/dark/index.ts b/packages/varlet-ui/src/themes/dark/index.ts
index 191072bcae0..439427c5f2d 100644
--- a/packages/varlet-ui/src/themes/dark/index.ts
+++ b/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
diff --git a/packages/varlet-ui/src/themes/dark/timePicker.ts b/packages/varlet-ui/src/themes/dark/timePicker.ts
new file mode 100644
index 00000000000..a8be96a6210
--- /dev/null
+++ b/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',
+}
diff --git a/packages/varlet-ui/src/time-picker/example/index.vue b/packages/varlet-ui/src/time-picker/example/index.vue
index be1813bf9a2..e5f1e5ca788 100644
--- a/packages/varlet-ui/src/time-picker/example/index.vue
+++ b/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),
diff --git a/packages/varlet-ui/src/time-picker/timePicker.less b/packages/varlet-ui/src/time-picker/timePicker.less
index e0a931c5d85..dd1821c3acd 100644
--- a/packages/varlet-ui/src/time-picker/timePicker.less
+++ b/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 {