Skip to content

feat(theme): 升级8月份主题的微调，修订dialog 样式的鸿蒙适配等 #3351

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 3, 2025
Merged

feat(theme): 升级8月份主题的微调，修订dialog 样式的鸿蒙适配等 #3351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
efbb81e
feat: 升级到最新的主题规范
xiaoyatong Sep 2, 2025
b02915b
feat: 修复dialog暗黑模式背景问题
xiaoyatong Sep 2, 2025
4b89638
feat: dialog 鸿蒙暗黑适配
xiaoyatong Sep 2, 2025
6e6f274
feat: 调整暗黑色值
xiaoyatong Sep 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/packages/configprovider/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,6 +458,7 @@ export type NutCSSVariables =
| 'nutuiDialogMaxHeight'
| 'nutuiDialogMinHeight'
| 'nutuiDialogBorderRadius'
| 'nutuiDialogBackground'
| 'nutuiDialogContentMargin'
Comment on lines +461 to 462
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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' src

Length 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;

| 'nutuiDialogContentMaxHeight'
| 'nutuiDialogContentLineHeight'
Expand Down
10 changes: 9 additions & 1 deletion src/packages/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
&-outer {
position: fixed;
max-height: 100%;
background-color: $white;
background-color: $dialog-background;
transition:
transform 0.2s,
-webkit-transform 0.2s;
Expand Down Expand Up @@ -130,12 +130,20 @@
&-cancel.nut-dialog-footer-cancel {
margin-right: $dialog-footer-cancel-margin-right;
background: $dialog-footer-cancel-bg;
color: $button-default-color;
.nut-button-children {
color: $button-default-color;
}
}

&-ok {
max-width: $dialog-footer-ok-max-width;
font-weight: $font-weight-bold;
.nut-button-children {
font-weight: $font-weight-bold;
}
}

&-block {
&.nut-button {
min-width: 100%;
Expand Down
146 changes: 90 additions & 56 deletions src/styles/theme-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,82 +18,48 @@ page {
--nutui-brand-stop-1: #ff475d; // 渐变色起
--nutui-brand-stop-2: #fa3725; // 渐变色止

// 品牌颜色语义化
// 品牌主色调默认态，主要功能控件的背景、边框、镂空状态下的文字等
--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-brand-7);
// 品牌主色调禁用态，背景、边框、镂空状态下的文字
--nutui-color-primary-disabled: var(--nutui-color-content-gray-1);
// 品牌主色调特殊禁用态，通过操作后可转位默认态
--nutui-color-primary-disabled-special: var(--nutui-brand-3);
// 品牌主色调镂空背景点击态
--nutui-color-primary-light-pressed: var(--nutui-brand-1);
--nutui-color-primary-specialdisabled: var(--nutui-red-3);

// service color
--nutui-golden-1: #292725;
--nutui-golden-2: #4d4134;
--nutui-golden-3: #c59463;
--nutui-golden-4: #d18e54;
--nutui-golden-1: #fff4e8;
--nutui-golden-2: rgba(184, 124, 63, 0.04);
--nutui-golden-3: rgba(191, 130, 66, 0.2);
--nutui-golden-4: #b87c3f;
--nutui-golden-5: #4d3b2a;
--nutui-golden-6: #33271c;
--nutui-golden-7: #ccb8a3;

--nutui-golden-stop-1: #fff9f0;
--nutui-golden-stop-2: #ffe3c2;

// service color 语义化
--nutui-color-service: var(--nutui-golden-1);
--nutui-color-service-border: var(--nutui-golden-2);
--nutui-color-service-pressed: var(--nutui-golden-4);
--nutui-color-service-stop-1: var(--nutui-golden-stop-1);
--nutui-color-service-stop-2: var(--nutui-golden-stop-2);
--nutui-color-service-text: var(--nutui-golden-3);

// success color
--nutui-green-1: #1f2920;
--nutui-green-2: #32c241;
--nutui-green-3: #12b222;

// success color 语义化
--nutui-color-success: var(--nutui-green-2); // 深背景
--nutui-color-success-light: var(--nutui-green-1); // 浅背景
--nutui-color-success-pressed: var(--nutui-green-3); // 文字

// danger color
--nutui-red-1: #2e2526;
--nutui-red-2: #ff3344;
--nutui-red-3: #ff3344;
--nutui-red-6: #ff3b3b;
// danger color 发现不一致 TODO

// danger color 语义化
--nutui-color-danger: var(--nutui-red-2); // 背景或文字
--nutui-color-danger-light: var(--nutui-red-1); // 背景
// red color
--nutui-red-1: #4c1c20;
--nutui-red-2: #621a20;
--nutui-red-3: #603840;
--nutui-red-4: #893f49;
--nutui-red-5: #bc3139;
--nutui-red-6: #bc3139;
--nutui-red-7: #ed3b34;
--nutui-red-8: #ff5144;
--nutui-red-9: #ff9382;
--nutui-red-10: #ffccbf;
--nutui-red-11: #ffe7e0;

// warning color
--nutui-yellow-1: #29271f;
--nutui-yellow-2: #faaf00;
--nutui-yellow-3: #c47600; //todo

// warning color 语义化
--nutui-color-warning: var(--nutui-yellow-2); // 深背景
--nutui-color-warning-light: var(--nutui-yellow-1); // 浅背景
--nutui-color-warning-pressed: var(--nutui-yellow-3); // 文字
--nutui-yellow-3: #cc8500;

// info color
--nutui-blue-1: #23292e;
--nutui-blue-2: #3385ff;

// info color 语义化
--nutui-color-info: var(--nutui-blue-2); // 背景或文字，链接色
--nutui-color-info-light: var(--nutui-blue-1); // 背景

--nutui-secondary-1: #14cc33; // 辅助色
--nutui-color-text-link: var(--nutui-blue-2);

// 背景色
// 卡片背景色
Expand All @@ -102,6 +68,8 @@ page {
--nutui-gray-2: #141414;
// 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
--nutui-gray-3: #0a0a0a;
// 组件背景色，2025年新增
--nutui-gray-9: #333333;
// 文字色
// 四级文字色，不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。
--nutui-gray-4: #666666;
Expand All @@ -120,7 +88,7 @@ page {
--nutui-black-2: rgba(0, 0, 0, 0.1);
// 线条色
// 间隔线/容错线，用于结构或信息分割
--nutui-black-3: rgba(255, 255, 255, 0.06);
--nutui-black-3: rgba(255, 255, 255, 0.08);
--nutui-black-4: rgba(20, 20, 20, 0.1);
--nutui-black-5: rgba(20, 20, 20, 0.2);
--nutui-black-6: rgba(20, 20, 20, 0.3);
Expand Down Expand Up @@ -150,6 +118,69 @@ page {
--nutui-white-12: rgba(31, 31, 31, 0.9);
// --nutui-white-13: rgba(255, 255, 255, 1);

// 品牌颜色语义化
// 品牌主色调默认态，主要功能控件的背景、边框、镂空状态下的文字等
--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);

Comment on lines +121 to +142
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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-* 变量并做回归测试。

// service color 语义化
// 金色背景
--nutui-color-service: var(--nutui-golden-1);
// 填充标签边框
--nutui-color-service-border-1: var(--nutui-golden-2);
// 线框标签边框
--nutui-color-service-border-2: var(--nutui-golden-3);
// 废弃
// --nutui-color-service-border: var(--nutui-golden-2);
--nutui-color-service-pressed: var(--nutui-golden-4);
// 金色文字
--nutui-color-service-text: var(--nutui-golden-4);
// 金色按钮背景
--nutui-color-service-btn-bg: var(--nutui-golden-5);
// 金色按钮点击态背景
--nutui-color-service-btn-bg-pressed: var(--nutui-golden-6);
// 金色按钮文字
--nutui-color-service-btn-text: var(--nutui-golden-7);

--nutui-color-service-stop-1: var(--nutui-golden-stop-1);
--nutui-color-service-stop-2: var(--nutui-golden-stop-2);

// success color 语义化
--nutui-color-success: var(--nutui-green-2); // 深背景
--nutui-color-success-light: var(--nutui-green-1); // 浅背景
--nutui-color-success-pressed: var(--nutui-green-3); // 文字

// danger color 语义化，待办，看上去目前非常的独立 @周峯
--nutui-color-danger: var(--nutui-red-2); // 背景或文字
--nutui-color-danger-light: var(--nutui-red-1); // 背景

// info color 语义化
--nutui-color-info: var(--nutui-blue-2); // 背景或文字，链接色
--nutui-color-info-light: var(--nutui-blue-1); // 背景
--nutui-color-text-link: var(--nutui-blue-2);

// warning color 语义化
--nutui-color-warning: var(--nutui-yellow-2); // 深背景
--nutui-color-warning-light: var(--nutui-yellow-1); // 浅背景
--nutui-color-warning-pressed: var(--nutui-yellow-3); // 文字

// 文字颜色值 语义化
--nutui-color-content-gray-1: var(--nutui-gray-4);
--nutui-color-content-gray-2: var(--nutui-gray-5);
Expand All @@ -168,12 +199,15 @@ page {
--nutui-color-background-gray-1: var(--nutui-gray-1);
--nutui-color-background-gray-2: var(--nutui-gray-2);
--nutui-color-background-gray-3: var(--nutui-gray-3);
--nutui-color-background-gray-4: var(--nutui-gray-9);
// 页面背景
--nutui-color-background: var(--nutui-color-background-gray-3);
// 卡片背景
--nutui-color-background-overlay: var(--nutui-color-background-gray-1);
// 卡片内容器背景
--nutui-color-background-sunken: var(--nutui-color-background-gray-2);
// 组件背景，2025年新增
--nutui-color-background-component: var(--nutui-color-background-gray-4);

Comment on lines +209 to 211
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

Suggested change
// 组件背景，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.

// 蒙层颜色值 语义化
--nutui-color-mask-gray-1: var(--nutui-black-2);
Expand Down
Loading
Loading