@didaoktv/didaoui-uniapp 1.2.2 → 1.3.0

package/README.md

@@ -82,6 +82,65 @@ import { DdButton, DdInput } from '@didaoktv/didaoui-uniapp'
 
 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px (8pt 基础网格)
 
+### 主题与浅色模式（v1.3.0+）
+
+默认主题为暗色（dark-first）。主题机制分三层，**新增任何主题都不需要改动组件**：
+
+| 层 | 机制 | 适用场景 |
+|----|------|---------|
+| SCSS 编译期 | `_variables.scss` 全量 `!default`，消费者先声明变量再引入即可覆盖 | 整个 App 固定品牌换肤 |
+| CSS 变量运行时 | 组件消费 `var(--dd-x, #{$dd-x})`，SCSS 值为兜底（不引入主题文件时与旧版渲染一致） | 明暗切换、多主题共存 |
+| delta 级联 | `:root`/`page` 发射全量默认值（base 59 + 暗色 44），主题类只声明与默认不同的变量，未声明自动继承 | 快速配置新主题 |
+
+**启用运行时主题**：在 `App.vue` 全局样式引入：
+
+```scss
+@import '@didaoktv/didaoui-uniapp/scss/theme';
+```
+
+**切换明暗**（默认暗色，`.light` 为 opt-in）：
+
+```ts
+// H5
+document.documentElement.classList.toggle('light')
+// 小程序：页面根节点挂类（自定义属性沿节点树继承进组件）
+<view :class="isLight ? 'light' : 'dark'">…</view>
+```
+
+**明暗核心对照**（翻转 delta 共 44 个，完整清单见 `scss/_theme-tokens.scss`）：
+
+| Token | Dark（默认） | Light |
+|---|---|---|
+| `--dd-bg` / `--dd-fg` | `#0A0A0A` / `#F5F5F5` | `#FAFAFA` / `#0A0A0A` |
+| `--dd-surface` / `--dd-bg-card` | `#0A0A0A` / `#171717` | `#FFFFFF` |
+| `--dd-border-default` / `--dd-rule` | `#2A2A2A` | `#BDBDBD` |
+| `--dd-muted` | `#757575` | `#616161` |
+| 品牌色 `--dd-primary` 等 | 不随明暗翻转 | 同暗色 |
+
+**快速配置新主题**（两法互补）：
+
+```scss
+// 法一（编译期）：uni.scss 中一行换品牌色，全库（含 var 兜底值）生效
+$dd-primary: #d32f2f;
+@import '@didaoktv/didaoui-uniapp/scss/variables';
+
+// 法二（运行时）：全局样式中声明 delta 类，页面根节点挂类即生效；可与 .light 并列
+.cny-red {
+  @include dd-theme((
+    'primary': #d32f2f,
+    'primary-contrast': #ffffff,
+    'gradient-primary': linear-gradient(135deg, #f44336, #b71c1c),
+  ));
+}
+```
+
+注意事项：
+
+- `$dd-primary-contrast`（金底文字）刻意**不随明暗翻转**（保持 `#0A0A0A`）：品牌金不翻转，白字在金底对比度不可用；品牌主题可覆盖。
+- 少数 `rgba($dd-brand, a)` 包裹处（checkbox/switch/slider 各 1 处）为编译期值，不跟随运行时品牌换肤（明暗无碍）。
+- nvue 不支持 CSS 变量，不在主题机制支持范围内。
+- 自检：`npx tsc scripts/theme-selfcheck.ts --module commonjs --target es2020 --lib "es2020,dom" --outDir .check --skipLibCheck; node .check/theme-selfcheck.js`
+
 ## 新增业务组件（2026-08-22 纳入设计系统）
 
 > 新组件统一以主流组件库（Vant 等）同名/同类组件为 API 设计基准，符合 uni-app 多端规范，只消费上层 `scss/_variables.scss` 既有 token。

package/components/dd-action-sheet/dd-action-sheet.vue

@@ -98,7 +98,7 @@ function onClose() {
   &__mask {
     position: fixed;
     inset: 0;
-    background: $dd-color-overlay-strong;
+    background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     opacity: 0;
     visibility: hidden;
     z-index: 1000;
@@ -145,7 +145,7 @@ function onClose() {
   &__title-text {
     font-size: $dd-font-size-h4;
     font-weight: $dd-font-weight-h4;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
   }
 
   &__grid {
@@ -165,7 +165,7 @@ function onClose() {
     width: 96rpx;
     height: 96rpx;
     border-radius: 50%;
-    background: $dd-gradient-primary;
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
     @include dd-flex-center;
     @include dd-glow(gold);
   }
@@ -180,7 +180,7 @@ function onClose() {
   &__name {
     margin-top: $dd-space-1;
     font-size: $dd-font-size-caption;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
     max-width: 128rpx;
     @include dd-ellipsis(1);
   }
@@ -189,14 +189,14 @@ function onClose() {
     margin-top: $dd-space-3;
     height: 96rpx;
     border-radius: $dd-radius-xl;
-    background: $dd-surface-container-high;
+    background: var(--dd-surface-container-high, #{$dd-surface-container-high});
     @include dd-flex-center;
-    @include dd-hairline-top($dd-border-strong);
+    @include dd-hairline-top(var(--dd-border-strong, #{$dd-border-strong}));
   }
 
   &__cancel-text {
     font-size: $dd-font-size-body;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     font-weight: $dd-font-weight-body;
   }
 

package/components/dd-alert/dd-alert.vue

@@ -97,7 +97,7 @@ function onMaskClick() {
   &__mask {
     position: fixed;
     inset: 0;
-    background: $dd-color-overlay-strong;
+    background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     opacity: 0;
     visibility: hidden;
     z-index: 1000;
@@ -118,10 +118,10 @@ function onMaskClick() {
     visibility: hidden;
     z-index: 1001;
     width: 560rpx;
-    background: $dd-bg-elevated;
-    border: 1px solid $dd-border-default;
+    background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+    border: 1px solid var(--dd-border-default, #{$dd-border-default});
     border-radius: $dd-radius-xl;
-    box-shadow: $dd-shadow-4;
+    box-shadow: var(--dd-shadow-4, #{$dd-shadow-4});
     padding: $dd-space-5 $dd-space-5 $dd-space-4;
     display: flex;
     flex-direction: column;
@@ -143,27 +143,27 @@ function onMaskClick() {
     margin-bottom: $dd-space-3;
 
     &--info {
-      background: $dd-gradient-accent;
+      background: var(--dd-gradient-accent, #{$dd-gradient-accent});
       box-shadow: 0 0 40rpx rgba(45, 75, 160, 0.4);
     }
 
     &--success {
-      background: $dd-gradient-success;
+      background: var(--dd-gradient-success, #{$dd-gradient-success});
       box-shadow: 0 0 40rpx rgba(76, 175, 80, 0.4);
     }
 
     &--warning {
-      background: $dd-gradient-warning;
+      background: var(--dd-gradient-warning, #{$dd-gradient-warning});
       box-shadow: 0 0 40rpx rgba(249, 168, 37, 0.4);
     }
 
     &--error {
-      background: $dd-gradient-error;
+      background: var(--dd-gradient-error, #{$dd-gradient-error});
       box-shadow: 0 0 40rpx rgba(229, 57, 53, 0.4);
     }
 
     &--confirm {
-      background: $dd-gradient-primary-wide;
+      background: var(--dd-gradient-primary-wide, #{$dd-gradient-primary-wide});
       @include dd-glow(gold);
     }
   }
@@ -178,7 +178,7 @@ function onMaskClick() {
   &__title {
     font-size: $dd-font-size-h4;
     font-weight: $dd-font-weight-h4;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     text-align: center;
     line-height: $dd-line-height-h4;
   }
@@ -186,7 +186,7 @@ function onMaskClick() {
   &__message {
     margin-top: $dd-space-2;
     font-size: $dd-font-size-body;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
     text-align: center;
     line-height: $dd-line-height-body;
   }
@@ -209,13 +209,13 @@ function onMaskClick() {
 
     &--cancel {
       height: 88rpx;
-      background: $dd-neutral-700;
-      border: 1px solid $dd-border-strong;
+      background: var(--dd-surface-container-high, #{$dd-surface-container-high});
+      border: 1px solid var(--dd-border-strong, #{$dd-border-strong});
     }
 
     &--confirm {
       height: 88rpx;
-      background: $dd-gradient-primary;
+      background: var(--dd-gradient-primary, #{$dd-gradient-primary});
     }
   }
 
@@ -228,11 +228,11 @@ function onMaskClick() {
     font-weight: $dd-font-weight-body;
 
     &--cancel {
-      color: $dd-text-secondary;
+      color: var(--dd-text-secondary, #{$dd-text-secondary});
     }
 
     &--confirm {
-      color: $dd-neutral-900;
+      color: var(--dd-primary-contrast, #{$dd-primary-contrast});
       font-weight: 700;
     }
   }

package/components/dd-backtop/dd-backtop.vue

@@ -51,9 +51,9 @@ function onClick() {
   width: 80rpx;
   height: 80rpx;
   border-radius: $dd-radius-full;
-  background: $dd-surface;
-  color: $dd-text-primary;
-  box-shadow: $dd-shadow-2;
+  background: var(--dd-surface, #{$dd-surface});
+  color: var(--dd-text-primary, #{$dd-text-primary});
+  box-shadow: var(--dd-shadow-2, #{$dd-shadow-2});
   @include dd-flex-center;
   opacity: 0;
   transform: scale(0);

package/components/dd-badge/dd-badge.vue

@@ -121,28 +121,28 @@ const visible = computed(() => {
 
 // === 4 色变体 ===
 .dd-badge__sup--primary {
-  background: $dd-gradient-primary;
-  box-shadow: $dd-shadow-glow-gold-sm;
+  background: var(--dd-gradient-primary, #{$dd-gradient-primary});
+  box-shadow: var(--dd-shadow-glow-gold-sm, #{$dd-shadow-glow-gold-sm});
 }
 
 .dd-badge__sup--error {
-  background: $dd-error-500;
-  box-shadow: $dd-shadow-glow-error-sm;
+  background: var(--dd-error, #{$dd-error});
+  box-shadow: var(--dd-shadow-glow-error-sm, #{$dd-shadow-glow-error-sm});
 }
 
 .dd-badge__sup--success {
-  background: $dd-success-500;
-  box-shadow: $dd-shadow-glow-success-sm;
+  background: var(--dd-success, #{$dd-success});
+  box-shadow: var(--dd-shadow-glow-success-sm, #{$dd-shadow-glow-success-sm});
 }
 
 .dd-badge__sup--warning {
-  background: $dd-warning-500;
-  color: $dd-warning-contrast;
-  box-shadow: $dd-shadow-glow-warning-md;
+  background: var(--dd-warning, #{$dd-warning});
+  color: var(--dd-warning-contrast, #{$dd-warning-contrast});
+  box-shadow: var(--dd-shadow-glow-warning-md, #{$dd-shadow-glow-warning-md});
 }
 
 // text 变体强制反色字
 .dd-badge__sup--text.dd-badge__sup--warning .dd-badge__txt {
-  color: $dd-warning-contrast;
+  color: var(--dd-warning-contrast, #{$dd-warning-contrast});
 }
 </style>

package/components/dd-bill-detail/dd-bill-detail.vue

@@ -115,8 +115,8 @@ function onClick(item: BillItem, index: number) {
   padding: $dd-space-3 $dd-space-4;
   font-size: $dd-font-size-body;
   font-weight: $dd-font-weight-lead;
-  color: $dd-text-primary;
-  border-bottom: 1px solid $dd-border-subtle;
+  color: var(--dd-text-primary, #{$dd-text-primary});
+  border-bottom: 1px solid var(--dd-border-subtle, #{$dd-border-subtle});
 }
 
 .dd-bill-detail__goods {
@@ -130,7 +130,7 @@ function onClick(item: BillItem, index: number) {
   padding: $dd-space-2 0;
 
   &--press {
-    background: $dd-interactive-hover;
+    background: var(--dd-interactive-hover, #{$dd-interactive-hover});
   }
 }
 
@@ -152,13 +152,13 @@ function onClick(item: BillItem, index: number) {
 
 .dd-bill-detail__name {
   font-size: $dd-font-size-body;
-  color: $dd-text-primary;
+  color: var(--dd-text-primary, #{$dd-text-primary});
   @include dd-ellipsis(1);
 }
 
 .dd-bill-detail__price {
   font-size: $dd-font-size-caption;
-  color: $dd-text-tertiary;
+  color: var(--dd-text-tertiary, #{$dd-text-tertiary});
 }
 
 .dd-bill-detail__gcount {
@@ -167,7 +167,7 @@ function onClick(item: BillItem, index: number) {
 
 .dd-bill-detail__count {
   font-size: $dd-font-size-caption;
-  color: $dd-text-secondary;
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
 }
 
 .dd-bill-detail__gamount {
@@ -177,7 +177,7 @@ function onClick(item: BillItem, index: number) {
 .dd-bill-detail__amount {
   font-size: $dd-font-size-body;
   font-weight: $dd-font-weight-lead;
-  color: $dd-text-primary;
+  color: var(--dd-text-primary, #{$dd-text-primary});
   font-family: $dd-font-mono;
 }
 
@@ -187,12 +187,12 @@ function onClick(item: BillItem, index: number) {
 
   &-text {
     font-size: $dd-font-size-body;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   }
 }
 
 .dd-bill-detail__summary {
-  border-top: 1px solid $dd-border-subtle;
+  border-top: 1px solid var(--dd-border-subtle, #{$dd-border-subtle});
   padding: $dd-space-2 $dd-space-4 $dd-space-3;
 }
 
@@ -205,18 +205,18 @@ function onClick(item: BillItem, index: number) {
   &--total {
     margin-top: $dd-space-1;
     padding-top: $dd-space-2;
-    border-top: 1px solid $dd-border-subtle;
+    border-top: 1px solid var(--dd-border-subtle, #{$dd-border-subtle});
   }
 }
 
 .dd-bill-detail__sum-label {
   font-size: $dd-font-size-caption;
-  color: $dd-text-tertiary;
+  color: var(--dd-text-tertiary, #{$dd-text-tertiary});
 }
 
 .dd-bill-detail__sum-value {
   font-size: $dd-font-size-caption;
-  color: $dd-text-secondary;
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
   font-family: $dd-font-mono;
 }
 
@@ -229,13 +229,13 @@ function onClick(item: BillItem, index: number) {
 .dd-bill-detail__total-label {
   font-size: $dd-font-size-body;
   font-weight: $dd-font-weight-lead;
-  color: $dd-text-primary;
+  color: var(--dd-text-primary, #{$dd-text-primary});
 }
 
 .dd-bill-detail__total {
   font-size: $dd-font-size-h4;
   font-weight: $dd-font-weight-h3;
-  color: $dd-primary-400;
+  color: var(--dd-primary-400, #{$dd-primary-400});
   font-family: $dd-font-mono;
 }
 
@@ -244,16 +244,16 @@ function onClick(item: BillItem, index: number) {
   padding: 2rpx 12rpx;
   border-radius: $dd-radius-sm;
 
-  &--unpaid { color: $dd-warning-400; background: rgba(249, 168, 37, 0.12); }
-  &--paid { color: $dd-success-400; background: rgba(76, 175, 80, 0.12); }
-  &--refunding { color: $dd-info-400; background: rgba(0, 188, 212, 0.12); }
-  &--refunded { color: $dd-warning-400; background: rgba(249, 168, 37, 0.12); }
-  &--cancelled { color: $dd-text-tertiary; background: rgba(255, 255, 255, 0.08); }
+  &--unpaid { color: var(--dd-warning-400, #{$dd-warning-400}); background: rgba(249, 168, 37, 0.12); }
+  &--paid { color: var(--dd-success-400, #{$dd-success-400}); background: rgba(76, 175, 80, 0.12); }
+  &--refunding { color: var(--dd-info-400, #{$dd-info-400}); background: rgba(0, 188, 212, 0.12); }
+  &--refunded { color: var(--dd-warning-400, #{$dd-warning-400}); background: rgba(249, 168, 37, 0.12); }
+  &--cancelled { color: var(--dd-text-tertiary, #{$dd-text-tertiary}); background: rgba(255, 255, 255, 0.08); }
 }
 
 .dd-bill-detail__actions {
   padding: $dd-space-3 $dd-space-4;
-  border-top: 1px solid $dd-border-subtle;
+  border-top: 1px solid var(--dd-border-subtle, #{$dd-border-subtle});
   display: flex;
   justify-content: flex-end;
   gap: $dd-space-3;

package/components/dd-button/dd-button.vue

@@ -150,21 +150,21 @@ function onClick(e: Event) {
 }
 
 .dd-btn--primary {
-  background: $dd-primary-500;
+  background: var(--dd-primary, #{$dd-primary});
   color: $dd-neutral-50;
 }
 .dd-btn--secondary {
-  background: $dd-neutral-800;
-  color: $dd-primary-400;
-  border-color: $dd-neutral-700;
+  background: var(--dd-surface-container, #{$dd-surface-container});
+  color: var(--dd-primary-400, #{$dd-primary-400});
+  border-color: var(--dd-border-default, #{$dd-border-default});
 }
 .dd-btn--ghost {
   background: transparent;
-  color: $dd-neutral-300;
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
 }
 .dd-btn--text {
   background: transparent;
-  color: $dd-primary-400;
+  color: var(--dd-primary-400, #{$dd-primary-400});
   border-color: transparent;
   border-radius: 0;
   height: auto;
@@ -178,16 +178,16 @@ function onClick(e: Event) {
   }
 }
 .dd-btn--success {
-  background: $dd-success-500;
-  color: $dd-success-contrast;
+  background: var(--dd-success, #{$dd-success});
+  color: var(--dd-success-contrast, #{$dd-success-contrast});
 }
 .dd-btn--warning {
-  background: $dd-warning-500;
-  color: $dd-warning-contrast;
+  background: var(--dd-warning, #{$dd-warning});
+  color: var(--dd-warning-contrast, #{$dd-warning-contrast});
 }
 .dd-btn--danger {
-  background: $dd-error-500;
-  color: $dd-error-contrast;
+  background: var(--dd-error, #{$dd-error});
+  color: var(--dd-error-contrast, #{$dd-error-contrast});
 }
 
 .dd-btn--round {

package/components/dd-calendar/dd-calendar.vue

@@ -217,20 +217,20 @@ function onConfirm() {
   width: 56rpx;
   height: 56rpx;
   border-radius: $dd-radius-md;
-  background: $dd-surface-container-high;
+  background: var(--dd-surface-container-high, #{$dd-surface-container-high});
   @include dd-flex-center;
-  color: $dd-text-secondary;
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
   font-size: $dd-font-size-h4;
 
   &--press {
-    background: $dd-surface-press;
+    background: var(--dd-surface-press, #{$dd-surface-press});
   }
 }
 
 .dd-calendar__title {
   font-size: $dd-font-size-body;
   font-weight: $dd-font-weight-lead;
-  color: $dd-text-primary;
+  color: var(--dd-text-primary, #{$dd-text-primary});
 }
 
 .dd-calendar__week {
@@ -242,7 +242,7 @@ function onConfirm() {
 .dd-calendar__week-item {
   text-align: center;
   font-size: $dd-font-size-caption;
-  color: $dd-text-tertiary;
+  color: var(--dd-text-tertiary, #{$dd-text-tertiary});
 }
 
 .dd-calendar__grid {
@@ -257,13 +257,13 @@ function onConfirm() {
   border-radius: $dd-radius-md;
 
   &--press:not(.dd-calendar__cell--disabled, .dd-calendar__cell--blank) {
-    background: $dd-surface-hover;
+    background: var(--dd-surface-hover, #{$dd-surface-hover});
   }
 }
 
 .dd-calendar__day {
   font-size: $dd-font-size-body;
-  color: $dd-text-primary;
+  color: var(--dd-text-primary, #{$dd-text-primary});
 }
 
 .dd-calendar__cell--blank .dd-calendar__day {
@@ -271,19 +271,19 @@ function onConfirm() {
 }
 
 .dd-calendar__cell--disabled .dd-calendar__day {
-  color: $dd-text-tertiary;
+  color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   opacity: 0.4;
 }
 
 .dd-calendar__cell--today .dd-calendar__day {
-  color: $dd-primary-400;
+  color: var(--dd-primary-400, #{$dd-primary-400});
   font-weight: 700;
 }
 
 .dd-calendar__cell--selected {
-  background: $dd-gradient-primary;
+  background: var(--dd-gradient-primary, #{$dd-gradient-primary});
   .dd-calendar__day {
-    color: $dd-neutral-900;
+    color: var(--dd-primary-contrast, #{$dd-primary-contrast});
     font-weight: 700;
   }
 }
@@ -295,13 +295,13 @@ function onConfirm() {
 
 .dd-calendar__slots {
   margin-top: $dd-space-3;
-  border-top: 1px solid $dd-border-subtle;
+  border-top: 1px solid var(--dd-border-subtle, #{$dd-border-subtle});
   padding-top: $dd-space-3;
 }
 
 .dd-calendar__slots-title {
   font-size: $dd-font-size-caption;
-  color: $dd-text-tertiary;
+  color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   margin-bottom: $dd-space-2;
 }
 
@@ -314,13 +314,13 @@ function onConfirm() {
 .dd-calendar__slot {
   padding: $dd-space-1 $dd-space-3;
   font-size: $dd-font-size-caption;
-  color: $dd-text-secondary;
-  background: $dd-surface-container-high;
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
+  background: var(--dd-surface-container-high, #{$dd-surface-container-high});
   border-radius: $dd-radius-md;
 
   &--active {
-    color: $dd-neutral-900;
-    background: $dd-gradient-primary;
+    color: var(--dd-primary-contrast, #{$dd-primary-contrast});
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
     font-weight: 700;
   }
 
@@ -334,19 +334,19 @@ function onConfirm() {
   justify-content: flex-end;
   gap: $dd-space-3;
   margin-top: $dd-space-3;
-  border-top: 1px solid $dd-border-subtle;
+  border-top: 1px solid var(--dd-border-subtle, #{$dd-border-subtle});
   padding-top: $dd-space-3;
 }
 
 .dd-calendar__footer-btn {
   padding: $dd-space-2 $dd-space-4;
   font-size: $dd-font-size-body;
-  color: $dd-text-secondary;
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
   border-radius: $dd-radius-md;
 
   &--primary {
-    color: $dd-neutral-900;
-    background: $dd-gradient-primary;
+    color: var(--dd-primary-contrast, #{$dd-primary-contrast});
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
     font-weight: 700;
   }
 

package/components/dd-capsule-button/dd-capsule-button.vue

@@ -66,7 +66,7 @@ function onMenu() {
   &__btn {
     flex: 1;
     @include dd-flex-center;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
     @include dd-transition(background 0.2s ease);
 
     &:active {
@@ -78,8 +78,8 @@ function onMenu() {
   &__arrow {
     width: 20rpx;
     height: 20rpx;
-    border-left: $dd-space-1 solid $dd-text-secondary;
-    border-bottom: $dd-space-1 solid $dd-text-secondary;
+    border-left: $dd-space-1 solid var(--dd-text-secondary, #{$dd-text-secondary});
+    border-bottom: $dd-space-1 solid var(--dd-text-secondary, #{$dd-text-secondary});
     transform: rotate(45deg);
     margin-left: $dd-space-1;
   }
@@ -87,7 +87,7 @@ function onMenu() {
   &__dots {
     font-size: $dd-font-size-h3;
     line-height: 1;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
   }
 
   // 1px 竖向分隔线，仅 default 变体
@@ -95,7 +95,7 @@ function onMenu() {
     width: 1px;
     height: $dd-space-4;
     align-self: center;
-    background: $dd-border-default;
+    background: var(--dd-border-default, #{$dd-border-default});
     flex-shrink: 0;
   }
 

package/components/dd-car-keyboard/dd-car-keyboard.vue

@@ -222,25 +222,25 @@
 <style lang="scss" scoped>
 @import '../../scss/variables';
 @import '../../scss/dd-shared';
-	$dd-car-keyboard-background-color: $dd-bg-section !default;
+	$dd-car-keyboard-background-color: var(--dd-bg-section, #{$dd-bg-section}) !default;
 	$dd-car-keyboard-padding:6px 0 6px !default;
 	$dd-car-keyboard-button-inner-width:64rpx !default;
-	$dd-car-keyboard-button-inner-background-color:$dd-surface-container-high !default;
+	$dd-car-keyboard-button-inner-background-color:var(--dd-surface-container-high, #{$dd-surface-container-high}) !default;
 	$dd-car-keyboard-button-height:80rpx !default;
-	$dd-car-keyboard-button-inner-box-shadow:0 1px 0px $dd-bg !default;
+	$dd-car-keyboard-button-inner-box-shadow:0 1px 0px var(--dd-bg, #{$dd-bg}) !default;
 	$dd-car-keyboard-button-border-radius:4px !default;
 	$dd-car-keyboard-button-inner-margin:8rpx 5rpx !default;
 	$dd-car-keyboard-button-text-font-size:16px !default;
-	$dd-car-keyboard-button-text-color:$dd-text-primary !default;
+	$dd-car-keyboard-button-text-color:var(--dd-text-primary, #{$dd-text-primary}) !default;
 	$dd-car-keyboard-center-inner-margin: 0 4rpx !default;
 	$dd-car-keyboard-special-button-width:134rpx !default;
 	$dd-car-keyboard-lang-font-size:16px !default;
-	$dd-car-keyboard-lang-color:$dd-text-primary !default;
-	$dd-car-keyboard-active-color:$dd-primary-400 !default;
+	$dd-car-keyboard-lang-color:var(--dd-text-primary, #{$dd-text-primary}) !default;
+	$dd-car-keyboard-active-color:var(--dd-primary-400, #{$dd-primary-400}) !default;
 	$dd-car-keyboard-line-font-size:15px !default;
-	$dd-car-keyboard-line-color:$dd-text-primary !default;
+	$dd-car-keyboard-line-color:var(--dd-text-primary, #{$dd-text-primary}) !default;
 	$dd-car-keyboard-line-margin:0 1px !default;
-	$dd-car-keyboard-dd-keyboard-hover-background-color:$dd-surface-hover !default;
+	$dd-car-keyboard-dd-keyboard-hover-background-color:var(--dd-surface-hover, #{$dd-surface-hover}) !default;
 
 	.dd-keyboard {
 		@include flex(column);