feat(theme): 升级8月份主题的微调，修订dialog 样式的鸿蒙适配等 #3351
Conversation
Walkthrough本次变更新增并贯通对话框背景变量链路（--nutui-dialog-background / $dialog-background），修改 Dialog 样式以使用该变量，并在默认与暗色主题中大规模重构与扩展语义色与调色板 CSS 变量。同步更新 ConfigProvider 可识别变量枚举。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant App as 应用
participant ConfigProvider as ConfigProvider
participant CSSVars as "CSS 变量"
participant SCSS as "SCSS 变量"
participant Dialog as Dialog 组件
App->>ConfigProvider: 提供 theme / config
ConfigProvider->>CSSVars: 设置 --nutui-dialog-background（可选）
App->>Dialog: 请求渲染对话框
Dialog->>SCSS: 读取 $dialog-background
SCSS->>CSSVars: 解析 var(--nutui-dialog-background, $color-background-overlay)
CSSVars-->>SCSS: 返回解析后的颜色值
SCSS-->>Dialog: 应用到 .nut-dialog-outer 背景
Note right of Dialog: 页脚按钮子节点使用新颜色与字重规则
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
3.x
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3351 +/- ##
==========================================
Coverage 88.15% 88.15%
==========================================
Files 291 291
Lines 19212 19212
Branches 2987 2988 +1
==========================================
+ Hits 16936 16937 +1
+ Misses 2270 2269 -1
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (12)
src/packages/dialog/dialog.scss (1)
130-136: 取消按钮文字色直设到 .nut-button-children，建议确认与 Button 各状态的优先级关系在不同 Button type/disabled/hover 场景下，该选择器可能覆盖组件内部的设计；建议联动用例回归，必要时限定作用范围（如仅 default/plain 态）。
可临时自测场景：默认/幽灵/禁用/深浅主题下的 Dialog，观察取消按钮文本对比度与交互反馈。
src/styles/theme-dark.scss (6)
38-38: 去除“发现不一致 TODO”，在 PR 内明确处理或拉 Issue 追踪危险色系“不一致”指向不清，建议在本 PR 修正或在描述中附上差异点与后续计划的 Issue 链接。
90-91: TODO 评论含个人 @，请用可检索的 Issue 引用替换建议改为“TODO(#issue-id): 描述…”，避免个人指向且便于追踪。
- // 间隔线/容错线，用于结构或信息分割，TODO @zhoufeng + // 间隔线/容错线，用于结构或信息分割。TODO(#<issue-id>): 按设计基线复核该值
121-142: disabled 语义当前指向文字灰，作为“背景/边框”可能对比不足--nutui-color-primary-disabled 指向 --nutui-color-content-gray-1（文字灰），用于背景/边框时在暗色下可能偏浅。建议验证关键组件（Button、Tag、Tabs）对比度；必要时拆分前景/背景禁用语义或改指向背景灰。
143-160: Service 语义 token 大幅扩展：请补充迁移说明新增 border-1/2、btn 系列等为破坏性变更的潜在来源（旧 token 被标记“废弃”）。建议在变更日志/迁移指南中列出映射关系与替代用法。需要我起草一版迁移表吗？
170-173: Danger 缺少 pressed 三态，建议与 success/warning 对齐为保持语义一致性，补充 --nutui-color-danger-pressed。建议取更深一档红。
--nutui-color-danger: var(--nutui-red-2); // 背景或文字 --nutui-color-danger-light: var(--nutui-red-1); // 背景 + --nutui-color-danger-pressed: var(--nutui-red-7); // 按下/强调文字
202-210: 新增“组件背景”语义变量：请确认 Dialog 已切换并有鸿蒙降级检视 Dialog 样式是否已改用“对话框背景”链路，并在 Harmony OS 上提供硬编码十六进制的先行声明作为降级：先写静态色，后写 var()。
示例（应在组件样式里而非主题里应用）：
-.nut-dialog { background-color: var(--nutui-dialog-background); } +.nut-dialog { + background-color: #141414; /* Harmony 降级 */ + background-color: var(--nutui-dialog-background); +}（颜色请按设计规范替换）
src/styles/theme-default.scss (5)
37-37: 去除“发现不一致 TODO”，需在本 PR 内明确或拉 Issue与暗色文件相同，请说明“危险色不一致”的具体点并给出处理计划。
120-141: Primary 语义说明与暗色一致，但有两点建议
- disabled 指向文字灰，作为背景/边框可能对比不足，请验证关键组件。
- 删除“看上去命名重复，去掉”的注释与废弃变量的残留注释，保持主题文件整洁。
- // 看上去命名和上边重复，去掉 - // --nutui-color-primary-specialdisabled: var(--nutui-red-3); + // （已废弃的 specialdisabled 变量不再暴露；如需恢复请经设计评审）
142-163: Service 语义 token 扩展：请在文档/变更日志中提供迁移表与暗色同评，建议标注旧 token 的替代项，便于业务侧升级。
169-169: Danger 语义 TODO 需处理或追踪与暗色同评，建议补齐 pressed 三态并清理 TODO。
201-210: “组件背景”语义新增：请确认 Dialog 背景链路已改造并提供 Harmony 降级请确保 Dialog 使用统一变量（如 --nutui-dialog-background）并在组件样式内提供静态色 + var() 的双声明以适配鸿蒙（CSS 变量兼容性历史问题）。需要我补一版示例 PR 片段吗？
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (7)
src/packages/configprovider/types.ts(1 hunks)src/packages/dialog/dialog.scss(2 hunks)src/styles/theme-dark.scss(5 hunks)src/styles/theme-default.scss(4 hunks)src/styles/variables-jmapp.scss(1 hunks)src/styles/variables-jrkf.scss(1 hunks)src/styles/variables.scss(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2540
File: src/packages/trendarrow/trendarrow.taro.tsx:29-30
Timestamp: 2024-11-06T02:16:07.069Z
Learning: 在`TrendArrow`组件（`src/packages/trendarrow/trendarrow.taro.tsx`）中，CSS变量在鸿蒙系统（Harmony OS）中可能未被完全支持，导致兼容性问题。因此，使用硬编码的十六进制颜色值可以确保在鸿蒙系统上的正确显示。
📚 Learning: 2024-11-06T02:16:07.069Z
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2540
File: src/packages/trendarrow/trendarrow.taro.tsx:29-30
Timestamp: 2024-11-06T02:16:07.069Z
Learning: 在`TrendArrow`组件（`src/packages/trendarrow/trendarrow.taro.tsx`）中，CSS变量在鸿蒙系统（Harmony OS）中可能未被完全支持，导致兼容性问题。因此，使用硬编码的十六进制颜色值可以确保在鸿蒙系统上的正确显示。
Applied to files:
src/styles/theme-dark.scsssrc/styles/theme-default.scss
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (14)
src/packages/dialog/dialog.scss (2)
21-21: 使用 $dialog-background 替换固定色，方向正确与新增主题变量对齐，有利于全局换肤与品牌定制。
请在鸿蒙构建产物上重点验收该背景是否实际生效（结合上游变量兜底修改）。
138-143: 确定性加粗 OK 按钮文案，符合强调诉求实现简单直观，无副作用。
src/styles/theme-dark.scss (5)
22-28: 黄金色系扩展与默认主题保持对齐，请确认无偏差本段与默认主题的 1-7 档应一一对应，避免跨主题复用语义 token 时出现风格漂移。请核对数值与命名一致性。
41-51: 红色刻度疑似重复：--nutui-red-5 与 --nutui-red-6 同值两档均为 #bc3139，可能导致按阶梯取色时不可区分。请确认是否为刻意；若非刻意，请校正 red-6 以保持明度/饱和度单调变化。
71-73: 新增灰阶 9 档用于组件背景：方向正确与下方“组件背景”语义变量联动合理。
165-169: Success 语义完善 OK默认/浅、按下三态齐全，命名与用途清晰。
175-178: 链接色可访问性校验--nutui-color-text-link 指向 --nutui-blue-2，请在暗色背景上验证与正文色的对比度（WCAG AA 文本对比 >= 4.5:1）。
src/styles/theme-default.scss (7)
21-27: 黄金色系扩展 OK与暗色主题形成配对刻度，命名一致。
40-51: 红色刻度重构 OK从浅到深分布合理，便于语义映射。
53-56: 黄色新增 3 档并引入 pressed 语义的基础色：OK为 warning-pressed 提供了更深一档来源。
67-71: 灰阶 2/3 更新并新增 9 档用于组件背景：OK与“组件背景”语义变量联动良好。
76-81: 正文/标题灰阶更新：OK更贴近 2025 版排版对比策略。
90-91: 黑色刻度 3（分隔线透明度）与暗色主题存在差异，请确认是设计特意默认 0.08、暗色 0.06。若非刻意，建议统一，避免跨主题组件边界感不一致。
173-181: Info/Warning 语义完善 OK；请验证可访问性链接色、warning-pressed 三态齐全。请在浅色背景下校验链接与正文对比度。
| | 'nutuiDialogBackground' | ||
| | 'nutuiDialogContentMargin' |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
类型枚举新增项位置正确，命名一致性良好
和现有 Dialog 相关条目风格一致，OK。
为确保生效路径完整，请在仓库执行以下脚本检查映射与使用点：
🏁 Script executed:
#!/bin/bash
# 1) 枚举项/变量用例是否存在
rg -nC2 -e 'nutuiDialogBackground' -e '--nutui-dialog-background' -e '\$dialog-background'
# 2) 若有变量->CSS变量自动映射方法（如 camelCase 转 kebab-case），确认是否包含 DialogBackground
rg -nC3 -e 'kebab|toKebab|map.*CSS|variables.*map|inject.*CSS' srcLength of output: 13027
为 DialogContentMargin 补充 SCSS 默认变量映射
请在以下主题文件中新增 $dialog-content-margin 对应的 SCSS 变量及 CSS 变量默认值声明，确保 --nutui-dialog-content-margin 生效：
- src/styles/variables.scss
- src/styles/variables-jrkf.scss
- src/styles/variables-jmapp.scss
示例：
$dialog-content-margin: var(--nutui-dialog-content-margin, <默认值>) !default;| $dialog-background: var( | ||
| --nutui-dialog-background, | ||
| $color-background-overlay | ||
| ) !default; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
同样为 $dialog-background 添加鸿蒙兜底
与主变量文件保持一致，给鸿蒙提供非 CSS 变量颜色，规避兼容性。
-$dialog-background: var(
- --nutui-dialog-background,
- $color-background-overlay
-) !default;
+/* #ifdef harmony */
+$dialog-background: $white !default;
+/* #endif */
+/* #ifndef harmony */
+$dialog-background: var(
+ --nutui-dialog-background,
+ $color-background-overlay
+) !default;
+/* #endif */📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| $dialog-background: var( | |
| --nutui-dialog-background, | |
| $color-background-overlay | |
| ) !default; | |
| /* #ifdef harmony */ | |
| $dialog-background: $white !default; | |
| /* #endif */ | |
| /* #ifndef harmony */ | |
| $dialog-background: var( | |
| --nutui-dialog-background, | |
| $color-background-overlay | |
| ) !default; | |
| /* #endif */ |
| $dialog-background: var( | ||
| --nutui-dialog-background, | ||
| $color-background-overlay | ||
| ) !default; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
为 $dialog-background 增加鸿蒙静态兜底，避免依赖 CSS 变量链路
此处 fallback 仍是 $color-background-overlay（多为 CSS 变量），在鸿蒙上可能失效。建议加入平台条件兜底。
-$dialog-background: var(
- --nutui-dialog-background,
- $color-background-overlay
-) !default;
+/* #ifdef harmony */
+$dialog-background: $white !default;
+/* #endif */
+/* #ifndef harmony */
+$dialog-background: var(
+ --nutui-dialog-background,
+ $color-background-overlay
+) !default;
+/* #endif */需要的话，我也可以帮你在 jrkf 主题文档中标注文案与使用示例。
🤖 Prompt for AI Agents
In src/styles/variables-jrkf.scss around lines 1608–1611, the $dialog-background
fallback currently relies on $color-background-overlay (itself a CSS variable)
which can fail on HarmonyOS; add a platform-specific static fallback for
HarmonyOS after the existing fallback (or wrap with a platform conditional) so
the final fallback is a hard-coded SCSS token or hex usable on HarmonyOS,
ensuring the dialog background never depends solely on CSS variable resolution.
| $dialog-background: var( | ||
| --nutui-dialog-background, | ||
| $color-background-overlay | ||
| ) !default; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
新增 $dialog-background 很到位，但需为鸿蒙提供“非 CSS 变量”兜底
当前 fallback 指向 $color-background-overlay，实际仍是 CSS 变量链路；结合以往在鸿蒙上 CSS 变量不完全生效的反馈，建议加平台兜底，提升可用性。
可按既有样式宏用法增加静态兜底：
-$dialog-background: var(
- --nutui-dialog-background,
- $color-background-overlay
-) !default;
+/* #ifdef harmony */
+$dialog-background: $white !default;
+/* #endif */
+/* #ifndef harmony */
+$dialog-background: var(
+ --nutui-dialog-background,
+ $color-background-overlay
+) !default;
+/* #endif */我可以顺带在 theme-dark/default 中给 --nutui-dialog-background 补齐示例映射与文档段落。
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| $dialog-background: var( | |
| --nutui-dialog-background, | |
| $color-background-overlay | |
| ) !default; | |
| /* #ifdef harmony */ | |
| $dialog-background: $white !default; | |
| /* #endif */ | |
| /* #ifndef harmony */ | |
| $dialog-background: var( | |
| --nutui-dialog-background, | |
| $color-background-overlay | |
| ) !default; | |
| /* #endif */ |
🤖 Prompt for AI Agents
In src/styles/variables.scss around lines 1391-1394, the new $dialog-background
currently falls back to another CSS variable chain which may not work on
HarmonyOS; change the assignment so there is a concrete, non-CSS-variable SCSS
fallback (a concrete color token or hex value) when the CSS custom property is
not available (use Sass null-coalescing or conditional assignment to prefer
var(--nutui-dialog-background) but otherwise return a static color), and also
ensure theme-dark/default provides an explicit --nutui-dialog-background mapping
as the reviewer offered to add.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (7)
src/styles/theme-dark.scss (7)
22-28: 金色边框可读性风险：golden-2 仅 4% 透明度可能在深色底上几乎不可见建议将
--nutui-golden-2: rgba(184, 124, 63, 0.04)提升到 0.08~0.12 区间，保证 1px 边线在 #0a0a0a/#1f1f1f 背景下有足够对比度。- --nutui-golden-2: rgba(184, 124, 63, 0.04); + --nutui-golden-2: rgba(184, 124, 63, 0.10);
38-38: 移除 TODO 或在本 PR 内闭环“danger color 发现不一致”存在“发现不一致 TODO”注释但未处理，发布前请统一 red/danger 体系或给出说明。
41-51: 红色阶梯存在重复值与层级语义不明
--nutui-red-5与--nutui-red-6同为#bc3139。如 5/6 在语义上分别用于默认/pressed，建议区分明度或饱和度，避免视觉上无变化。
143-161: Service 金色语义：pressed 与文本同值，建议轻微区分以体现状态反馈目前
--nutui-color-service-pressed与--nutui-color-service-text都为--nutui-golden-4。建议将 pressed 稍作加深或减亮以产生可感知状态差。- --nutui-color-service-pressed: var(--nutui-golden-4); + --nutui-color-service-pressed: var(--nutui-golden-4); /* 若可调整，考虑新 token，如 golden-4-pressed */
170-173: Danger 语义缺少 pressed 態，且与 red 调色盘关系未定建议补充
--nutui-color-danger-pressed，并在注释中明确与--nutui-red-*的映射规范，消除“非常独立”的不确定性。--nutui-color-danger: var(--nutui-red-2); // 背景或文字 --nutui-color-danger-light: var(--nutui-red-1); // 背景 + --nutui-color-danger-pressed: var(--nutui-red-3); // 文字/按钮 pressed
174-178: Info 语义缺少 pressed 態，同时--nutui-color-text-link与 info 共用需统一交互色阶建议增加
--nutui-color-info-pressed，并与链接悬停/按下态对齐。--nutui-color-info: var(--nutui-blue-2); // 背景或文字，链接色 --nutui-color-info-light: var(--nutui-blue-1); // 背景 --nutui-color-text-link: var(--nutui-blue-2); + --nutui-color-info-pressed: var(--nutui-blue-2); /* 如可，定义更深一阶的 blue-3 供 pressed */
223-229: 细线颜色与禁用边框语义 OK；建议统一 hairline 方案变量层面无问题。若组件广泛使用 1px 线条，建议在运行时按 DPR 采用 0.5px/hairline 技术以减少强对比感。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
src/packages/dialog/dialog.scss(2 hunks)src/styles/theme-dark.scss(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/dialog/dialog.scss
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-11-06T02:16:07.069Z
Learnt from: oasis-cloud
PR: jdf2e/nutui-react#2540
File: src/packages/trendarrow/trendarrow.taro.tsx:29-30
Timestamp: 2024-11-06T02:16:07.069Z
Learning: 在`TrendArrow`组件（`src/packages/trendarrow/trendarrow.taro.tsx`）中，CSS变量在鸿蒙系统（Harmony OS）中可能未被完全支持，导致兼容性问题。因此，使用硬编码的十六进制颜色值可以确保在鸿蒙系统上的正确显示。
Applied to files:
src/styles/theme-dark.scss
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (7)
src/styles/theme-dark.scss (7)
56-56: 确认 warning-pressed 的对比度是否足够
--nutui-yellow-3: #cc8500将用于--nutui-color-warning-pressed（见行 182）。请确认在深色底（如--nutui-color-background-gray-3）上文本/图标对比度达标。
71-73: 新增 gray-9 与“组件背景”映射方向正确，命名清晰与 2025 背景层级分层一致，建议保持。
91-91: 将分隔线改为白 8% 透明度有助于弱对比分割该调整对暗黑主题观感更友好，赞同。
162-164: 补充渐变起止位映射合理无异议。
165-169: Success 语义分层完整深浅/pressed 三态完备，认可。
179-183: Warning 三态齐全，但与行 56 的 yellow-3 对比需验收赞同该结构，仍建议做一次可访问性对比验证。
202-202: background-gray-4 → gray-9 的公开映射清晰认可该映射作为“组件背景”中间层。
| // 品牌颜色语义化 | ||
| // 品牌主色调默认态，主要功能控件的背景、边框、镂空状态下的文字等 | ||
| --nutui-color-primary: var(--nutui-brand-6); | ||
| // 品牌渐变色左端 | ||
| --nutui-color-primary-stop-1: var(--nutui-brand-stop-1); | ||
| // 品牌渐变色右端 | ||
| --nutui-color-primary-stop-2: var(--nutui-brand-stop-2); | ||
| // 品牌主色调或其他深色背景下的文字 | ||
| --nutui-color-primary-text: var(--nutui-color-background-gray-1); | ||
| // 品牌主色调点击态，背景、边框、镂空状态下的文字 | ||
| --nutui-color-primary-pressed: var(--nutui-red-7); | ||
| // 品牌主色调禁用态，背景、边框、镂空状态下的文字 | ||
| --nutui-color-primary-disabled: var(--nutui-color-content-gray-1); | ||
| // 品牌主色调特殊禁用态，通过操作后可转位默认态 | ||
| --nutui-color-primary-disabled-special: var(--nutui-red-3); | ||
| // 2025 新增 | ||
| --nutui-color-primary-light: var(--nutui-brand-1); | ||
| // 品牌主色调镂空背景点击态 | ||
| --nutui-color-primary-light-pressed: var(--nutui-red-2); | ||
| // 看上去命名和上边重复，去掉 | ||
| // --nutui-color-primary-specialdisabled: var(--nutui-red-3); | ||
|
|
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Primary 语义：pressed/disabled 映射需一致性校验与回归扫描
--nutui-color-primary-pressed指向--nutui-red-7而非 brand 阶梯（brand-7/brand-8），请确认是否有意跨到 red 调色盘。- 建议补充对旧变量名的扫描，避免遗漏引用。
🏁 Script executed:
#!/bin/bash
# 扫描可能遗留的旧主色变量引用
rg -nP --glob '!**/dist/**' '\b--nutui-(brand-(pressed|text|disabled|light)|color-primary-(specialdisabled))\b|var\(--nutui-brand-'Length of output: 3517
统一 primary pressed/disabled 语义并替换旧变量
- 确认
--nutui-color-primary-pressed映射到var(--nutui-red-7)是否预期；如需与 brand 阶梯保持一致，请改为对应var(--nutui-brand-*)。 - 扫描发现 theme-jrkf.scss、theme-jmapp.scss、trendarrow、progress、avatar 等约 35 处旧
var(--nutui-brand-*)引用，需逐一替换为新--nutui-color-primary-*变量并做回归测试。
| // 组件背景，2025年新增 | ||
| --nutui-color-background-component: var(--nutui-color-background-gray-4); | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
为 Dialog 新增背景语义变量并提供暗黑默认映射；补充鸿蒙兜底策略
- 该 PR 引入了
--nutui-dialog-background（见其它文件的 Sass 映射），建议在暗黑主题内显式声明，指向组件背景，更可控。 - 结合过往 HarmonyOS 对 CSS 变量支持不完善的经验，建议在平台定制样式中提供硬编码兜底色（非 var()），避免在鸿蒙上出现透明/黑屏问题。
// 组件背景，2025年新增
--nutui-color-background-component: var(--nutui-color-background-gray-4);
+ // Dialog 背景（暗黑）
+ --nutui-dialog-background: var(--nutui-color-background-component);如需，我可提交一个 hm 平台差异化样式片段（基于选择器或构建条件）来使用十六进制硬编码色作为兜底。
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // 组件背景，2025年新增 | |
| --nutui-color-background-component: var(--nutui-color-background-gray-4); | |
| // 组件背景，2025年新增 | |
| --nutui-color-background-component: var(--nutui-color-background-gray-4); | |
| // Dialog 背景（暗黑） | |
| --nutui-dialog-background: var(--nutui-color-background-component); |
🤖 Prompt for AI Agents
src/styles/theme-dark.scss lines 209-211: add an explicit dark-theme CSS
variable declaration for --nutui-dialog-background mapping it to the component
background variable (e.g. --nutui-dialog-background:
var(--nutui-color-background-component);) so Dialog has a clear dark default,
and also add a HarmonyOS platform fallback in the platform-specific hm
stylesheet (or under a hm selector/build condition) that sets
--nutui-dialog-background to a hard-coded hex color (non-var) to avoid
transparent/black issues on devices with poor CSS variable support.
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
样式