fix(theme): [card,qr-code,skeleton] add dark theme (#3052)

wuyiping0628 · web-flow · commit 08123d6794e8 · 2025-03-10T19:01:14.000+08:00
* fix(theme): [card,qr-code,skeleton] add dark theme

* fix(theme): [card,qr-code,skeleton] add dark theme
diff --git a/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue
@@ -18,7 +18,7 @@ const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.p
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/basic-usage.vue b/examples/sites/demos/pc/app/card/basic-usage.vue
@@ -26,7 +26,7 @@ export default {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue b/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue
@@ -39,7 +39,7 @@ const options = ref([
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/card-disabled.vue b/examples/sites/demos/pc/app/card/card-disabled.vue
@@ -47,7 +47,7 @@ export default {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/card-events-composition-api.vue b/examples/sites/demos/pc/app/card/card-events-composition-api.vue
@@ -60,7 +60,7 @@ function iconClick(item, index) {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/card-events.vue b/examples/sites/demos/pc/app/card/card-events.vue
@@ -69,7 +69,7 @@ export default {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/card-group-composition-api.vue b/examples/sites/demos/pc/app/card/card-group-composition-api.vue
@@ -63,7 +63,7 @@ function change(val) {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/card-group.vue b/examples/sites/demos/pc/app/card/card-group.vue
@@ -73,7 +73,7 @@ export default {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/card-select-composition-api.vue b/examples/sites/demos/pc/app/card/card-select-composition-api.vue
@@ -86,7 +86,7 @@ const dataArr = ref([
 <style scoped>
 .card-wrap {
   width: 100%;
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
   display: flex;
   justify-content: space-between;
diff --git a/examples/sites/demos/pc/app/card/card-select.vue b/examples/sites/demos/pc/app/card/card-select.vue
@@ -96,7 +96,7 @@ export default {
 <style scoped>
 .card-wrap {
   width: 100%;
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
   display: flex;
   justify-content: space-between;
diff --git a/examples/sites/demos/pc/app/card/card-size-composition-api.vue b/examples/sites/demos/pc/app/card/card-size-composition-api.vue
@@ -53,7 +53,7 @@ const options = ref([
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/card-size.vue b/examples/sites/demos/pc/app/card/card-size.vue
@@ -61,7 +61,7 @@ export default {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/card-status-composition-api.vue b/examples/sites/demos/pc/app/card/card-status-composition-api.vue
@@ -43,7 +43,7 @@ import { TinyCard } from '@opentiny/vue'
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/card-status.vue b/examples/sites/demos/pc/app/card/card-status.vue
@@ -52,7 +52,7 @@ export default {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/card-type-composition-api.vue b/examples/sites/demos/pc/app/card/card-type-composition-api.vue
@@ -41,7 +41,7 @@ const userHead = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/us
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/card-type.vue b/examples/sites/demos/pc/app/card/card-type.vue
@@ -49,7 +49,7 @@ export default {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/check-mode-composition-api.vue b/examples/sites/demos/pc/app/card/check-mode-composition-api.vue
@@ -76,7 +76,7 @@ const dataArr = ref([
 <style scoped>
 .card-wrap {
   width: 100%;
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 .card-wrap :deep(.tiny-card-group) {
diff --git a/examples/sites/demos/pc/app/card/check-mode.vue b/examples/sites/demos/pc/app/card/check-mode.vue
@@ -85,7 +85,7 @@ export default {
 <style scoped>
 .card-wrap {
   width: 100%;
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 .card-wrap :deep(.tiny-card-group) {
diff --git a/examples/sites/demos/pc/app/card/check-type-checkbox-composition-api.vue b/examples/sites/demos/pc/app/card/check-type-checkbox-composition-api.vue
@@ -25,7 +25,7 @@ const radioValue = ref(false)
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/check-type-checkbox.vue b/examples/sites/demos/pc/app/card/check-type-checkbox.vue
@@ -34,7 +34,7 @@ export default {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue b/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue
@@ -25,7 +25,7 @@ const value = ref('1')
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/check-type-radio.vue b/examples/sites/demos/pc/app/card/check-type-radio.vue
@@ -33,7 +33,7 @@ export default {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/custom-class-composition-api.vue b/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
@@ -16,6 +16,6 @@ import { TinyCard } from '@opentiny/vue'
 <style scoped>
 .demo-card-custom-class {
   padding: 20px;
-  background-color: #f0f0f0;
+  background-color: #f5f5f5;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/custom-class.vue b/examples/sites/demos/pc/app/card/custom-class.vue
@@ -22,6 +22,6 @@ export default {
 <style scoped>
 .demo-card-custom-class {
   padding: 20px;
-  background-color: #f0f0f0;
+  background-color: #f5f5f5;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue b/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue
@@ -47,7 +47,7 @@ const options = ref([
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/operate-bar.vue b/examples/sites/demos/pc/app/card/operate-bar.vue
@@ -54,7 +54,7 @@ export default {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/slot-composition-api.vue b/examples/sites/demos/pc/app/card/slot-composition-api.vue
@@ -61,7 +61,7 @@ const isOpen = ref(true)
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/card/slot.vue b/examples/sites/demos/pc/app/card/slot.vue
@@ -70,7 +70,7 @@ export default {
 
 <style scoped>
 .card-wrap {
-  background: #f5f5f5;
+  background: var(--tv-color-bg-gray-1);
   padding: 16px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/qr-code/basic-usage.spec.ts b/examples/sites/demos/pc/app/qr-code/basic-usage.spec.ts
@@ -4,6 +4,6 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('qr-code#basic-usage')
 
-  const canvas = page.locator('.tiny-qr-code-container canvas')
+  const canvas = page.locator('.tiny-qr-code canvas')
   await expect(canvas).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/qr-code/icon.spec.ts b/examples/sites/demos/pc/app/qr-code/icon.spec.ts
@@ -4,8 +4,8 @@ test('自定义 icon', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('qr-code#icon')
 
-  const canvas = page.locator('.tiny-qr-code-container canvas')
-  const canvasImg = page.locator('.tiny-qr-code-container .mask-icon img')
+  const canvas = page.locator('.tiny-qr-code canvas')
+  const canvasImg = page.locator('.tiny-qr-code .mask-icon img')
   await expect(canvas).toBeVisible()
   await expect(canvasImg).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/qr-code/level.spec.ts b/examples/sites/demos/pc/app/qr-code/level.spec.ts
@@ -4,7 +4,7 @@ test('二维码纠错等级', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('qr-code#level')
 
-  const canvas = page.locator('.tiny-qr-code-container canvas')
+  const canvas = page.locator('.tiny-qr-code canvas')
   await expect(canvas).toBeVisible()
 
   const button = page.locator('.tiny-radio-button--small')
diff --git a/examples/sites/demos/pc/app/qr-code/style.spec.ts b/examples/sites/demos/pc/app/qr-code/style.spec.ts
@@ -4,6 +4,6 @@ test('自定义样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('qr-code#style')
 
-  const canvas = page.locator('.tiny-qr-code-container canvas')
+  const canvas = page.locator('.tiny-qr-code canvas')
   await expect(canvas).toBeVisible()
 })
diff --git a/packages/theme/src/qr-code/index.less b/packages/theme/src/qr-code/index.less
@@ -10,59 +10,59 @@
 *
 */
 @import '../custom.less';
-
+@import './vars.less';
 @qr-code-prefix-cls: ~'@{css-prefix}qr-code';
 
 .@{qr-code-prefix-cls} {
-  &-container {
-    position: relative;
-    padding: 12px;
+  .inject-QrCode-vars();
+  position: relative;
+  padding: 12px;
+  background-color: var(--tv-QrCode-container-bg-color);
 
-    &.border {
-      border: 1px solid rgb(5 5 5 / 6%);
-      border-radius: 8px;
-    }
+  &.border {
+    border: 1px solid rgba(231, 220, 220, 0.06);
+    border-radius: 8px;
+  }
 
-    .qrcode-border {
-      padding: 2px;
-      border: 1px solid rgb(5 5 5 / 6%);
-      border-radius: 8px;
+  .qrcode-border {
+    padding: 2px;
+    border: 1px solid rgb(5 5 5 / 6%);
+    border-radius: 8px;
+  }
+
+  .qrcode-expried {
+    font-size: 14px;
+  }
+
+  .mask {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: rgb(0 0 0 / 88%);
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    flex-direction: column;
+
+    &-icon {
+      z-index: 10;
     }
 
-    .qrcode-expried {
-      font-size: 14px;
+    &-status {
+      z-index: 20;
+      background: rgb(255 255 255 / 96%);
     }
 
-    .mask {
+    .icon {
       position: absolute;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 100%;
-      height: 100%;
-      text-align: center;
-      color: rgb(0 0 0 / 88%);
-      inset-block-start: 0;
-      inset-inline-start: 0;
-      flex-direction: column;
-
-      &-icon {
-        z-index: 10;
-      }
-
-      &-status {
-        z-index: 20;
-        background: rgb(255 255 255 / 96%);
-      }
-
-      .icon {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: none;
-        background: white;
-      }
+      border: none;
+      background: white;
     }
   }
 }
diff --git a/packages/theme/src/qr-code/vars.less b/packages/theme/src/qr-code/vars.less
@@ -0,0 +1,4 @@
+.inject-QrCode-vars() {
+  // 二维码背景色
+  --tv-QrCode-container-bg-color: var(--tv-color-bg-inverse-tint-1);
+}
diff --git a/packages/theme/src/skeleton-item/vars.less b/packages/theme/src/skeleton-item/vars.less
@@ -28,5 +28,5 @@
   // 大图片宽度设置
   --tv-SkeletonItem-image-large-size-width: 200px;
   // 渐变颜色设置(hide)
-  --tv-SkeletonItem-linear-gradient: linear-gradient(to right, #fafafa, #ebebeb, #fafafa);
+  --tv-SkeletonItem-linear-gradient: linear-gradient(to right, var(--tv-color-bg-hover), var(--tv-color-border-container), var(--tv-color-bg-hover));
 }
diff --git a/packages/theme/src/vars.less b/packages/theme/src/vars.less
diff --git a/packages/vue/src/qr-code/src/pc.vue b/packages/vue/src/qr-code/src/pc.vue

Original file line number	Diff line number	Diff line change
@@ -18,7 +18,7 @@ const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.p
`18`	`18`
`19`	`19`	`<style scoped>`
`20`	`20`	`.card-wrap {`
`21`		`- background: #f5f5f5;`
	`21`	`+ background: var(--tv-color-bg-gray-1);`
`22`	`22`	`padding: 16px;`
`23`	`23`	`}`
`24`	`24`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ export default {`
`26`	`26`
`27`	`27`	`<style scoped>`
`28`	`28`	`.card-wrap {`
`29`		`- background: #f5f5f5;`
	`29`	`+ background: var(--tv-color-bg-gray-1);`
`30`	`30`	`padding: 16px;`
`31`	`31`	`}`
`32`	`32`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ const options = ref([`
`39`	`39`
`40`	`40`	`<style scoped>`
`41`	`41`	`.card-wrap {`
`42`		`- background: #f5f5f5;`
	`42`	`+ background: var(--tv-color-bg-gray-1);`
`43`	`43`	`padding: 16px;`
`44`	`44`	`}`
`45`	`45`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ export default {`
`47`	`47`
`48`	`48`	`<style scoped>`
`49`	`49`	`.card-wrap {`
`50`		`- background: #f5f5f5;`
	`50`	`+ background: var(--tv-color-bg-gray-1);`
`51`	`51`	`padding: 16px;`
`52`	`52`	`}`
`53`	`53`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ function iconClick(item, index) {`
`60`	`60`
`61`	`61`	`<style scoped>`
`62`	`62`	`.card-wrap {`
`63`		`- background: #f5f5f5;`
	`63`	`+ background: var(--tv-color-bg-gray-1);`
`64`	`64`	`padding: 16px;`
`65`	`65`	`}`
`66`	`66`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@ export default {`
`69`	`69`
`70`	`70`	`<style scoped>`
`71`	`71`	`.card-wrap {`
`72`		`- background: #f5f5f5;`
	`72`	`+ background: var(--tv-color-bg-gray-1);`
`73`	`73`	`padding: 16px;`
`74`	`74`	`}`
`75`	`75`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ function change(val) {`
`63`	`63`
`64`	`64`	`<style scoped>`
`65`	`65`	`.card-wrap {`
`66`		`- background: #f5f5f5;`
	`66`	`+ background: var(--tv-color-bg-gray-1);`
`67`	`67`	`padding: 16px;`
`68`	`68`	`}`
`69`	`69`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ export default {`
`73`	`73`
`74`	`74`	`<style scoped>`
`75`	`75`	`.card-wrap {`
`76`		`- background: #f5f5f5;`
	`76`	`+ background: var(--tv-color-bg-gray-1);`
`77`	`77`	`padding: 16px;`
`78`	`78`	`}`
`79`	`79`	`</style>`