feat(select): add dark mode

varletjs · Nov 13, 2021 · 151bfc0 · 151bfc0
1 parent befd63c
commit 151bfc0
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git a/packages/varlet-ui/src/select/example/index.vue b/packages/varlet-ui/src/select/example/index.vue
@@ -97,6 +97,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import { reactive, toRefs } from 'vue'
 import { watchLang } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
+import { watchDarkMode } from '../../utils/components'
 
 export default {
   name: 'SelectExample',
@@ -136,6 +137,8 @@ export default {
       values.value11 = undefined
     })
 
+    watchDarkMode()
+
     return {
       pack,
       ...toRefs(values),

diff --git a/packages/varlet-ui/src/select/select.less b/packages/varlet-ui/src/select/select.less
@@ -9,7 +9,6 @@
 @select-placeholder-size: 16px;
 @select-icon-padding: 16px 0 0;
 @select-icon-size: 20px;
-@select-select-text-color: #555;
 @select-chip-margin: 5px 5px 0;
 @select-line-size: 1px;
 @select-line-spread-size: 2px;
@@ -97,6 +96,7 @@
     transition-duration: 0.3s;
     transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1);
     font-size: var(--select-placeholder-size);
+    color: var(--select-blur-color);
   }
 
   &__select {

diff --git a/packages/varlet-ui/src/themes/dark/index.ts b/packages/varlet-ui/src/themes/dark/index.ts
@@ -14,6 +14,7 @@ import steps from './steps'
 import pagination from './pagination'
 import table from './talble'
 import input from './input'
+import select from './select'
 import { StyleVars } from '../../style-provider'
 
 export default {
@@ -43,4 +44,5 @@ export default {
   ...pagination,
   ...table,
   ...input,
+  ...select,
 } as StyleVars
diff --git a/packages/varlet-ui/src/themes/dark/select.ts b/packages/varlet-ui/src/themes/dark/select.ts
@@ -0,0 +1,5 @@
+export default {
+  '--select-select-text-color': '#fff',
+  '--select-blur-color': 'rgb(255, 255, 255, .7)',
+  '--select-scroller-background': '#272727',
+}