@didaoktv/didaoui-uniapp 1.2.3 → 1.3.1

package/components/dd-loading/dd-loading.vue

@@ -61,7 +61,7 @@ const coreStyle = computed(() => (props.color ? { '--dd-loading-color': props.co
 @import '../../scss/mixins';
 
 .dd-loading {
-  --dd-loading-color: #{$dd-primary-400};
+  --dd-loading-color: var(--dd-primary-400, #{$dd-primary-400});
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -80,7 +80,7 @@ const coreStyle = computed(() => (props.color ? { '--dd-loading-color': props.co
   &__mask {
     position: absolute;
     inset: 0;
-    background: $dd-color-overlay-strong;
+    background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     /* #ifdef H5 */
     backdrop-filter: blur(8rpx);
     -webkit-backdrop-filter: blur(8rpx);
@@ -163,11 +163,11 @@ const coreStyle = computed(() => (props.color ? { '--dd-loading-color': props.co
     height: 24rpx;
     border-radius: 50%;
     background: var(--dd-loading-color);
-    box-shadow: $dd-shadow-glow-gold-lg;
+    box-shadow: var(--dd-shadow-glow-gold-lg, #{$dd-shadow-glow-gold-lg});
   }
 
   &__text {
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
     font-size: $dd-font-size-body;
     line-height: 1.4;
   }

package/components/dd-loadmore/dd-loadmore.vue

@@ -130,7 +130,7 @@ function onClick() {
   }
 
   &__spinner {
-    border: $dd-space-1 solid $dd-border-default;
+    border: $dd-space-1 solid var(--dd-border-default, #{$dd-border-default});
     border-radius: 50%;
     box-sizing: border-box;
     animation: dd-lm-spin 0.8s linear infinite;

package/components/dd-markdown/dd-markdown.vue

@@ -147,7 +147,7 @@ export default {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 16px;
   line-height: 1.6;
-  color: #333;
+  color: var(--dd-fg, #{$dd-fg});
   padding: 16px;
   word-wrap: break-word;
   
@@ -195,7 +195,7 @@ export default {
   
   /* 链接样式 */
   :deep(a) {
-    color: #007AFF;
+    color: var(--dd-link, #{$dd-link});
     text-decoration: none;
     
     &:hover {
@@ -226,15 +226,15 @@ export default {
   :deep(blockquote) {
     margin: 8px 0;
     padding: 0 10px;
-    border-left: 4px solid #ccc;
-    color: #666;
+    border-left: 4px solid var(--dd-border-default, #{$dd-border-default});
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
   }
   
   /* 代码样式 */
   :deep(&-code) {
     font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
     font-size: 14px;
-    background-color: #f6f8fa;
+    background-color: var(--dd-surface-container, #{$dd-surface-container});
     padding: 3px 6px;
     border-radius: 3px;
     display: flex;
@@ -247,7 +247,7 @@ export default {
   :deep(pre) {
     font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
     font-size: 14px;
-    background-color: #f6f8fa;
+    background-color: var(--dd-surface-container, #{$dd-surface-container});
     padding: 16px;
     overflow: auto;
     border-radius: 6px;
@@ -293,36 +293,12 @@ export default {
     height: 1px;
     padding: 0;
     margin: 24px 0;
-    background-color: #e1e4e8;
+    background-color: var(--dd-rule, #{$dd-rule});
     border: 0;
   }
-  
-  /* 深色主题 */
-  &.dark {
-    color: #ccc;
-    background-color: #1e1e1e;
-    
-    :deep(&-code) {
-      background-color: #2d2d2d;
-      color: #dcdcdc;
-    }
-    
-    :deep(pre) {
-      background-color: #2d2d2d;
-      color: #dcdcdc;
-    }
-
-    :deep(blockquote) {
-        margin: 8px 0;
-        padding: 0 10px;
-        border-left: 4px solid #ccc;
-        color: #bbb;
-    }
-    
-    :deep(a) {
-      color: #4da6ff;
-    }
-  }
+  // ponytail: .dark 本地类已废弃——CSS 变量随全局 .light/.dark 自动翻转，
+  // 保留空块避免消费方 class="dark" 断裂，升级路径：下个大版本直接删
+  &.dark {}
 }
 
 /* 代码块行号样式 */

package/components/dd-mini-program-navbar/dd-mini-program-navbar.vue

@@ -144,7 +144,7 @@ function onSearchConfirm(e: any) {
 .dd-mp-navbar {
   width: 100%;
   @include dd-glass;
-  border-bottom: 1px solid $dd-glass-border;
+  border-bottom: 1px solid var(--dd-glass-border, #{$dd-glass-border});
   position: relative;
   z-index: $dd-z-index-fixed;
 
@@ -185,15 +185,15 @@ function onSearchConfirm(e: any) {
   &__arrow {
     width: $dd-space-3;
     height: $dd-space-3;
-    border-left: $dd-space-1 solid $dd-primary-400;
-    border-bottom: $dd-space-1 solid $dd-primary-400;
+    border-left: $dd-space-1 solid var(--dd-primary-400, #{$dd-primary-400});
+    border-bottom: $dd-space-1 solid var(--dd-primary-400, #{$dd-primary-400});
     transform: rotate(45deg);
   }
 
   &__back-text {
     font-size: $dd-font-size-body;
     font-weight: 500;
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
   }
 
   &__center {
@@ -205,7 +205,7 @@ function onSearchConfirm(e: any) {
   &__title {
     font-size: $dd-font-size-h4;
     font-weight: 600;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     max-width: 60vw;
     @include dd-ellipsis(1);
     text-align: center;
@@ -214,7 +214,7 @@ function onSearchConfirm(e: any) {
   &__search {
     width: 100%;
     height: $dd-space-6;
-    background: $dd-surface-container;
+    background: var(--dd-surface-container, #{$dd-surface-container});
     border-radius: $dd-radius-full;
     display: flex;
     align-items: center;
@@ -230,7 +230,7 @@ function onSearchConfirm(e: any) {
   &__search-input {
     flex: 1;
     font-size: $dd-font-size-body;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
   }
 
   &__right {

package/components/dd-modal/dd-modal.vue

@@ -170,7 +170,7 @@ onUnmounted(() => {
   &__mask {
     position: fixed;
     inset: 0;
-    background: $dd-glass-bg;
+    background: var(--dd-glass-bg, #{$dd-glass-bg});
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     opacity: 0;
@@ -192,10 +192,10 @@ onUnmounted(() => {
     z-index: 1001;
     max-width: 720rpx; // 360px 上限
     max-height: 80vh;
-    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-4 $dd-space-5;
     display: flex;
     flex-direction: column;
@@ -216,10 +216,10 @@ onUnmounted(() => {
     transform: translateY(100%);
     z-index: 1001;
     max-height: 85vh;
-    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 $dd-radius-xl 0 0;
-    box-shadow: $dd-shadow-4;
+    box-shadow: var(--dd-shadow-4, #{$dd-shadow-4});
     display: flex;
     flex-direction: column;
     transition: transform 0.3s ease-out;
@@ -233,7 +233,7 @@ onUnmounted(() => {
     width: 72rpx;
     height: 8rpx;
     border-radius: $dd-radius-full;
-    background: $dd-neutral-700;
+    background: var(--dd-border-default, #{$dd-border-default});
     margin: 16rpx auto 8rpx;
     flex-shrink: 0;
   }
@@ -250,7 +250,7 @@ onUnmounted(() => {
   &__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});
   }
 
   &__close {
@@ -261,8 +261,8 @@ onUnmounted(() => {
     width: 64rpx;
     height: 64rpx;
     border-radius: $dd-radius-full;
-    background: $dd-gradient-primary;
-    color: $dd-neutral-900;
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
+    color: var(--dd-primary-contrast, #{$dd-primary-contrast});
     font-size: 36rpx;
     @include dd-flex-center;
   }

package/components/dd-navigation/dd-navigation.vue

@@ -71,11 +71,11 @@ function onSelect(index: number) {
   align-items: center;
   width: 100%;
   height: 112rpx;
-  background: $dd-surface;
+  background: var(--dd-surface, #{$dd-surface});
   box-sizing: border-box;
 
   &--border {
-    @include dd-hairline-top($dd-border-subtle);
+    @include dd-hairline-top(var(--dd-border-subtle, #{$dd-border-subtle}));
   }
 
   &--fixed {
@@ -94,11 +94,11 @@ function onSelect(index: number) {
     @include dd-flex-center;
     flex-direction: column;
     gap: $dd-space-1;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     @include dd-transition(color 0.3s);
 
     &--active {
-      color: $dd-primary-400;
+      color: var(--dd-primary-400, #{$dd-primary-400});
       .dd-nav__icon {
         text-shadow: 0 0 12px rgba(245, 166, 35, 0.5);
       }
@@ -116,8 +116,8 @@ function onSelect(index: number) {
     width: $dd-space-5;
     height: $dd-space-1;
     border-radius: 0 0 $dd-radius-sm $dd-radius-sm;
-    background: $dd-gradient-primary-h;
-    box-shadow: $dd-shadow-glow-gold-sm;
+    background: var(--dd-gradient-primary-h, #{$dd-gradient-primary-h});
+    box-shadow: var(--dd-shadow-glow-gold-sm, #{$dd-shadow-glow-gold-sm});
   }
 
   &__icon {

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

@@ -135,7 +135,7 @@
 <style lang="scss" scoped>
 @import '../../scss/variables';
 @import '../../scss/dd-shared';
-	$dd-number-keyboard-background-color: $dd-bg-section !default;
+	$dd-number-keyboard-background-color: var(--dd-bg-section, #{$dd-bg-section}) !default;
 	$dd-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
 	$dd-number-keyboard-button-width:222rpx !default;
 	$dd-number-keyboard-button-margin:4px 6rpx !default;
@@ -144,13 +144,13 @@
 	$dd-number-keyboard-button-border-bottom-left-radius:4px !default;
 	$dd-number-keyboard-button-border-bottom-right-radius:4px !default;
 	$dd-number-keyboard-button-height: 90rpx!default;
-	$dd-number-keyboard-button-background-color:$dd-surface-container-high !default;
-	$dd-number-keyboard-button-box-shadow:0 2px 0px $dd-bg !default;
+	$dd-number-keyboard-button-background-color:var(--dd-surface-container-high, #{$dd-surface-container-high}) !default;
+	$dd-number-keyboard-button-box-shadow:0 2px 0px var(--dd-bg, #{$dd-bg}) !default;
 	$dd-number-keyboard-text-font-size:20px !default;
 	$dd-number-keyboard-text-font-weight:500 !default;
-	$dd-number-keyboard-text-color:$dd-text-primary !default;
-	$dd-number-keyboard-gray-background-color:$dd-surface-container-highest !default;
-	$dd-number-keyboard-dd-keyboard-hover-background-color: $dd-surface-hover !default;
+	$dd-number-keyboard-text-color:var(--dd-text-primary, #{$dd-text-primary}) !default;
+	$dd-number-keyboard-gray-background-color:var(--dd-surface-container-highest, #{$dd-surface-container-highest}) !default;
+	$dd-number-keyboard-dd-keyboard-hover-background-color: var(--dd-surface-hover, #{$dd-surface-hover}) !default;
 
 	.dd-keyboard {
 		@include flex;

package/components/dd-overlay/dd-overlay.vue

@@ -92,7 +92,7 @@ function onTouchMove() {
 .dd-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.7);
+  background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
   display: flex;
   align-items: center;
   justify-content: center;

package/components/dd-picker/dd-picker.vue

@@ -113,14 +113,15 @@ function onConfirm() {
 @import '../../scss/variables';
 @import '../../scss/mixins';
 :deep(.uni-picker-view-mask) {
-  background-image: linear-gradient(180deg, hsl(0deg 0% 9% / 95%), hsl(0deg 0% 9% / 60%)), linear-gradient(0deg, hsl(0deg 0% 9% / 95%), hsl(0deg 0% 9% / 60%));
+  background-image: linear-gradient(180deg, var(--dd-surface-container, #{$dd-surface-container}), transparent 60%),
+                    linear-gradient(0deg, var(--dd-surface-container, #{$dd-surface-container}), transparent 60%);
 }
 .dd-picker {
   &__mask {
     position: fixed;
     inset: 0;
     z-index: $dd-z-index-overlay;
-    background: rgba(0, 0, 0, 0.7);
+    background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     opacity: 0;
     pointer-events: none;
     @include dd-transition(opacity 0.3s);
@@ -132,7 +133,7 @@ function onConfirm() {
     right: 0;
     bottom: 0;
     z-index: $dd-z-index-popup;
-    background: $dd-neutral-800;
+    background: var(--dd-bg-elevated, #{$dd-bg-elevated});
     border-radius: $dd-radius-lg $dd-radius-lg 0 0;
     transform: translateY(100%);
     @include dd-transition(transform 0.3s);
@@ -151,24 +152,24 @@ function onConfirm() {
     @include dd-flex-between;
     height: 96rpx;
     padding: 0 32rpx;
-    @include dd-hairline-bottom($dd-border-default);
+    @include dd-hairline-bottom(var(--dd-border-default, #{$dd-border-default}));
   }
   &__cancel {
     font-size: 28rpx;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
   }
   &__title {
     flex: 1;
     text-align: center;
     font-size: 32rpx;
     font-weight: 600;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     @include dd-ellipsis(1);
   }
   &__confirm {
     font-size: 28rpx;
     font-weight: 600;
-    color: $dd-primary-500;
+    color: var(--dd-primary, #{$dd-primary});
   }
 
   &__body {
@@ -185,7 +186,7 @@ function onConfirm() {
   }
   &__item-text {
     font-size: 28rpx;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     @include dd-ellipsis(1);
   }
 
@@ -193,11 +194,11 @@ function onConfirm() {
     position: absolute;
     inset: 0;
     @include dd-flex-center;
-    background: rgba($dd-neutral-800, 0.6);
+    background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
   }
   &__layer-text {
     font-size: 24rpx;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   }
 }
 </style>

package/components/dd-popover/dd-popover.vue

@@ -116,14 +116,14 @@ provide('ddPopover', {
     min-width: 240rpx;
     max-width: 480rpx;
     border-radius: $dd-radius-lg;
-    box-shadow: $dd-shadow-2;
+    box-shadow: var(--dd-shadow-2, #{$dd-shadow-2});
     overflow: visible;
     z-index: 2000;
 
     &--light {
-      background: $dd-bg-elevated;
-      color: $dd-text-primary;
-      .dd-popover__arrow { background: $dd-bg-elevated; }
+      background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+      color: var(--dd-text-primary, #{$dd-text-primary});
+      .dd-popover__arrow { background: var(--dd-bg-elevated, #{$dd-bg-elevated}); }
     }
     &--dark {
       background: $dd-neutral-700;

package/components/dd-popover-item/dd-popover-item.vue

@@ -62,11 +62,11 @@ function onClick() {
 
   // 首项不显示顶部分隔线，其余项之间用 hairline 分隔
   &:not(:first-child) {
-    @include dd-hairline-top($dd-border-default);
+    @include dd-hairline-top(var(--dd-border-default, #{$dd-border-default}));
   }
 
   &:active {
-    background: $dd-surface-container;
+    background: var(--dd-surface-container, #{$dd-surface-container});
   }
 
   &--disabled {

package/components/dd-popup/dd-popup.vue

@@ -154,7 +154,7 @@ onUnmounted(() => {
   &__overlay {
     position: fixed;
     inset: 0;
-    background: $dd-color-overlay-strong;
+    background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     opacity: 0;
@@ -167,8 +167,8 @@ onUnmounted(() => {
 
   &__panel {
     position: fixed;
-    background: $dd-bg-elevated;
-    box-shadow: $dd-shadow-3;
+    background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+    box-shadow: var(--dd-shadow-3, #{$dd-shadow-3});
     transition: transform var(--dd-popup-duration, 0.3s) ease,
                 opacity var(--dd-popup-duration, 0.3s) ease;
 
@@ -225,7 +225,7 @@ onUnmounted(() => {
     position: absolute;
     width: 56rpx;
     height: 56rpx;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     font-size: 44rpx;
     @include dd-flex-center;
     z-index: 2;

package/components/dd-progress/dd-progress.vue

@@ -121,7 +121,7 @@ function stepStatus(i: number): 'done' | 'current' | 'pending' {
   &__track {
     flex: 1;
     height: 12rpx;
-    background: #2a2a2a;
+    background: var(--dd-surface-container-high, #{$dd-surface-container-high});
     border-radius: $dd-radius-full;
     overflow: hidden;
     position: relative;
@@ -159,7 +159,7 @@ function stepStatus(i: number): 'done' | 'current' | 'pending' {
 
   &__text {
     font-size: $dd-font-size-caption;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
     font-variant-numeric: tabular-nums;
     flex-shrink: 0;
   }
@@ -174,14 +174,14 @@ function stepStatus(i: number): 'done' | 'current' | 'pending' {
 
   &__circle-mask {
     border-radius: 50%;
-    background: $dd-surface;
+    background: var(--dd-surface, #{$dd-surface});
     @include dd-flex-center;
   }
 
   &__circle-text {
     font-size: $dd-font-size-lead;
     font-weight: 700;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     font-variant-numeric: tabular-nums;
   }
 
@@ -207,13 +207,13 @@ function stepStatus(i: number): 'done' | 'current' | 'pending' {
     width: 24rpx;
     height: 24rpx;
     border-radius: 50%;
-    background: #2a2a2a;
+    background: var(--dd-surface-container-high, #{$dd-surface-container-high});
     flex-shrink: 0;
     @include dd-transition(all 0.3s ease);
 
     &--done,
     &--current {
-      background: $dd-gradient-primary;
+      background: var(--dd-gradient-primary, #{$dd-gradient-primary});
       box-shadow: 0 0 12rpx rgba(245, 166, 35, 0.5);
     }
 
@@ -226,11 +226,11 @@ function stepStatus(i: number): 'done' | 'current' | 'pending' {
     flex: 1;
     height: $dd-space-1;
     margin: 0 $dd-space-1;
-    background: #2a2a2a;
+    background: var(--dd-surface-container-high, #{$dd-surface-container-high});
     @include dd-transition(background 0.3s ease);
 
     &--done {
-      background: $dd-primary-500;
+      background: var(--dd-primary, #{$dd-primary});
     }
   }
 }

package/components/dd-pull-refresh/dd-pull-refresh.vue

@@ -183,7 +183,7 @@ watch(
     position: relative;
     height: 100%;
     z-index: 1;
-    background: $dd-bg;
+    background: var(--dd-bg, #{$dd-bg});
 
     &--anim {
       transition: transform 300ms ease;
@@ -209,15 +209,15 @@ watch(
   &__spinner {
     width: $dd-size-icon-sm;
     height: $dd-size-icon-sm;
-    border: 4rpx solid $dd-border-default;
-    border-top-color: $dd-primary-500;
+    border: 4rpx solid var(--dd-border-default, #{$dd-border-default});
+    border-top-color: var(--dd-primary, #{$dd-primary});
     border-radius: 50%;
     animation: dd-pr-spin 0.8s linear infinite;
   }
 
   &__text {
     font-size: $dd-font-size-body;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   }
 
   &__scroll {

package/components/dd-radio/dd-radio.vue

@@ -66,7 +66,7 @@ function onToggle() {
     @include dd-flex-center;
     flex-shrink: 0;
     border-radius: $dd-radius-full;
-    border: 3rpx solid $dd-neutral-700;
+    border: 3rpx solid var(--dd-border-default, #{$dd-border-default});
     background: transparent;
     box-sizing: border-box;
     @include dd-transition(all 0.2s);
@@ -82,13 +82,13 @@ function onToggle() {
 
   &__label {
     font-size: 28rpx;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
   }
 
   &--checked .dd-radio__outer {
-    background: $dd-gradient-primary;
-    border-color: $dd-primary-500;
-    box-shadow: $dd-shadow-glow-gold-lg;
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
+    border-color: var(--dd-primary, #{$dd-primary});
+    box-shadow: var(--dd-shadow-glow-gold-lg, #{$dd-shadow-glow-gold-lg});
   }
 
   &--checked .dd-radio__inner {