feat(divider): support dark mode

varletjs · Nov 15, 2021 · fa7e5ab · fa7e5ab
1 parent ad053cc
commit fa7e5ab
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 3 deletions.
diff --git a/packages/varlet-ui/src/divider/divider.less b/packages/varlet-ui/src/divider/divider.less
@@ -1,4 +1,4 @@
-@divider-color: #bcc2cb;
+@divider-color: rgba(0, 0, 0, 0.12);
 @divider-text-color: #888;
 @divider-text-margin: 8px 0;
 @divider-text-padding: 0 8px;

diff --git a/packages/varlet-ui/src/divider/docs/en-US.md b/packages/varlet-ui/src/divider/docs/en-US.md
@@ -73,7 +73,7 @@ Here are the CSS variables used by the component, Styles can be customized using
 
 | Variable | Default |
 | --- | --- |
-| `--divider-color` | `#bcc2cb` |
+| `--divider-color` | `rgba(0, 0, 0, 0.12)` |
 | `--divider-text-color` | `#888`|
 | `--divider-text-margin` | `8px 0`|
 | `--divider-text-padding` | `0 8px`|

diff --git a/packages/varlet-ui/src/divider/docs/zh-CN.md b/packages/varlet-ui/src/divider/docs/zh-CN.md
@@ -71,7 +71,7 @@ createApp().use(Divider)
 
 | 变量名 | 默认值 |
 | --- | --- |
-| `--divider-color` | `#bcc2cb` |
+| `--divider-color` | `rgba(0, 0, 0, 0.12)` |
 | `--divider-text-color` | `#888`|
 | `--divider-text-margin` | `8px 0`|
 | `--divider-text-padding` | `0 8px`|

diff --git a/packages/varlet-ui/src/divider/example/index.vue b/packages/varlet-ui/src/divider/example/index.vue
@@ -41,6 +41,7 @@ import VarDivider from '..'
 import VarIcon from '../../icon'
 import { pack, use } from './locale'
 import { watchLang } from '@varlet/cli/site/utils'
+import { watchDarkMode } from '../../utils/components'
 
 export default {
   name: 'DividerExample',
@@ -51,6 +52,7 @@ export default {
   },
   setup() {
     watchLang(use)
+    watchDarkMode()
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/themes/dark/divider.ts b/packages/varlet-ui/src/themes/dark/divider.ts
@@ -0,0 +1,3 @@
+export default {
+  '--divider-color': 'rgba(255, 255, 255, 0.12)',
+}
diff --git a/packages/varlet-ui/src/themes/dark/index.ts b/packages/varlet-ui/src/themes/dark/index.ts
@@ -16,6 +16,7 @@ import switchThemes from './switch'
 import steps from './steps'
 import pagination from './pagination'
 import table from './table'
+import divider from './divider'
 import { StyleVars } from '../../style-provider'
 
 export default {
@@ -47,4 +48,5 @@ export default {
   ...steps,
   ...pagination,
   ...table,
+  ...divider,
 } as StyleVars