feat(ui/skeleton): adaptatiton darkmode for skeleton

varletjs · Nov 12, 2021 · 3ee30f6 · 3ee30f6
1 parent 5fee882
commit 3ee30f6
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/packages/varlet-ui/src/skeleton/example/index.vue b/packages/varlet-ui/src/skeleton/example/index.vue
@@ -34,6 +34,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import { ref } from 'vue'
 import { watchLang } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
+import { watchDarkMode } from '../../utils/components'
 
 export default {
   name: 'SkeletonExample',
@@ -47,6 +48,7 @@ export default {
     const fullscreenLoading = ref(false)
 
     watchLang(use)
+    watchDarkMode()
 
     return {
       pack,

diff --git a/packages/varlet-ui/src/themes/dark/index.ts b/packages/varlet-ui/src/themes/dark/index.ts
@@ -1,5 +1,6 @@
 import button from './button'
 import cell from './cell'
+import skeleton from './skeleton'
 import { StyleVars } from '../../style-provider'
 
 export default {
@@ -15,4 +16,5 @@ export default {
   '--color-text-disabled': '#757575',
   ...button,
   ...cell,
+  ...skeleton,
 } as StyleVars
diff --git a/packages/varlet-ui/src/themes/dark/skeleton.ts b/packages/varlet-ui/src/themes/dark/skeleton.ts
@@ -0,0 +1,8 @@
+export default {
+  '--skeleton-card-background-color': 'hsla(0,0%,100%,.12)',
+  '--skeleton-animation-background': `linear-gradient(
+        90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.05),hsla(0,0%,100%,0))
+      `,
+  '--skeleton-avatar-background-color': 'hsla(0,0%,100%,.12)',
+  '--skeleton-title-background-color': 'hsla(0,0%,100%,.12)',
+}