feat(input): add dark mode

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

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git a/packages/varlet-ui/src/input/example/index.vue b/packages/varlet-ui/src/input/example/index.vue
@@ -43,6 +43,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import { reactive, toRefs } from 'vue'
 import { use, pack } from './locale'
 import { watchLang } from '@varlet/cli/site/utils'
+import { watchDarkMode } from '../../utils/components'
 
 export default {
   name: 'InputExample',
@@ -68,6 +69,7 @@ export default {
       use(lang)
       values.value5 = pack.value.clearableText
     })
+    watchDarkMode()
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/input/input.less b/packages/varlet-ui/src/input/input.less
@@ -73,6 +73,7 @@
     transition-duration: 0.3s;
     transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1);
     font-size: var(--input-placeholder-size);
+    color: var(--input-blur-color);
   }
 
   &__textarea-placeholder {
@@ -83,6 +84,7 @@
     transition: transform 0.3s;
     transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1);
     font-size: var(--input-placeholder-size);
+    color: var(--input-blur-color);
   }
 
   &__autocomplete {
@@ -100,10 +102,10 @@
     padding: 0;
     outline: none;
     border: none;
-    font-size: inherit;
     background: transparent;
     color: var(--input-input-text-color);
     caret-color: var(--input-focus-color);
+    font: inherit;
   }
 
   &__line {

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