fix: dark mode for v15 #2883
fix: dark mode for v15 #2883
Conversation
变更概述演练这个拉取请求涉及多个文件的样式和主题变更，主要包括修改 CSS 变量、调整颜色定义和透明度，以及更新某些组件的样式。变更范围包括 变更
可能相关的 PR
建议的审阅者
诗歌
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2883 +/- ##
==========================================
Coverage 84.56% 84.56%
==========================================
Files 273 273
Lines 18593 18593
Branches 2691 2691
==========================================
Hits 15723 15723
Misses 2865 2865
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/navbar/demos/h5/demo3.tsx (1)
33-33: 建议将内联样式移动到外部样式文件统一管理
在此处直接设置内联样式虽然能快速解决背景色问题，但当项目规模变大或需要反复修改样式时，可能更适合使用CSS类或主题变量来提升可维护性和一致性。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/packages/navbar/demo.scss(0 hunks)src/packages/navbar/demos/h5/demo3.tsx(1 hunks)src/packages/navbar/demos/taro/demo3.tsx(1 hunks)src/packages/tabs/tabs.scss(1 hunks)src/sites/mobile/App.tsx(1 hunks)src/styles/theme-dark.scss(3 hunks)src/styles/theme-default.scss(2 hunks)src/styles/variables.scss(6 hunks)
💤 Files with no reviewable changes (1)
- src/packages/navbar/demo.scss
✅ Files skipped from review due to trivial changes (3)
- src/packages/navbar/demos/taro/demo3.tsx
- src/sites/mobile/App.tsx
- src/packages/tabs/tabs.scss
🔇 Additional comments (9)
src/styles/theme-default.scss (2)
41-42: 完成金色主题色系的定义
补充了之前标记为 "todo" 的金色变量定义，使色彩系统更加完整。
102-102: 更新灰色背景色值
将 --nutui-gray-3 从 #f5f6fa 更新为 #f2f3f5，调整后的颜色更适合作为页面基底色。
src/styles/theme-dark.scss (4)
40-43: 优化暗色模式下的金色系配色
调整后的金色配色更适合暗色模式的视觉体验，对比度适中。
57-59: 优化暗色模式下的成功状态色
调整成功状态的颜色层次，使其在暗色模式下更加醒目且易识别。
67-69: 统一暗色模式下的危险色系
将红色系的值统一调整，保持视觉一致性。
119-119: 优化暗色模式下的遮罩层和分割线颜色
调整遮罩层透明度和分割线颜色，提升暗色模式下的层次感。
Also applies to: 122-122
src/styles/variables.scss (3)
1792-1795: 更新指示器默认颜色
将指示器的默认颜色更改为禁用状态文本颜色，提升暗色模式下的可读性。
1972-1975: 调整空状态背景色
使用叠加背景色变量，确保空状态组件在暗色模式下有正确的显示效果。
2104-2104: 优化网格组件背景色
使用语义化的灰度变量，提升组件在不同主题下的适配性。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/packages/navbar/demos/h5/demo3.tsx (1)
33-33: 在 Tabs 组件上添加透明背景以满足暗色模式需求的改动看起来不错，但请确保与整体主题系统一致。建议统一将暗色模式的样式通过主题变量或全局 CSS 进行管理，减少内联样式的重复和冲突。
src/packages/navbar/demos/taro/demo3.tsx (1)
42-44: 同样在这里给 Tabs 增加透明背景，建议验证在暗色模式下是否有其他组件需要同步调整。为了可维护性，可以考虑使用主题变量或公共 CSS，保证各处暗色模式样式一致且便于后期修改。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/packages/navbar/demo.scss(0 hunks)src/packages/navbar/demos/h5/demo3.tsx(1 hunks)src/packages/navbar/demos/taro/demo3.tsx(1 hunks)src/packages/tabs/tabs.scss(1 hunks)src/sites/mobile/App.tsx(1 hunks)src/styles/theme-dark.scss(3 hunks)src/styles/theme-default.scss(2 hunks)src/styles/variables.scss(6 hunks)
💤 Files with no reviewable changes (1)
- src/packages/navbar/demo.scss
✅ Files skipped from review due to trivial changes (2)
- src/packages/tabs/tabs.scss
- src/sites/mobile/App.tsx
🔇 Additional comments (7)
src/styles/theme-default.scss (2)
41-42: 完成金色系列变量的定义
之前标记为 todo 的金色变量现已完成定义，颜色值选择合理。
102-102: 验证灰度值的调整是否影响暗色主题
灰度值从 #f5f6fa 调整为 #f2f3f5，建议确认在暗色主题下的表现。
✅ Verification successful
灰度值调整不会影响暗色主题的表现
在暗色主题中，--nutui-gray-3被重新定义为#0a0a0a，与默认主题中的#f2f3f5完全独立。这个变量主要用于背景色和边框相关的样式，在暗色主题中已经做了适配处理。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有其他文件使用了这个颜色值
rg --type scss "#f5f6fa|#f2f3f5"
Length of output: 63
Script:
#!/bin/bash
# Search for color values in all files, not limiting to scss extension
rg "#f5f6fa|#f2f3f5"
# Also check for dark theme related files
fd -t f dark
Length of output: 121
Script:
#!/bin/bash
# Check the content of dark theme file
cat src/styles/theme-dark.scss
# Search for any usage of --nutui-gray-3 variable
rg --type css "var\(--nutui-gray-3\)"
Length of output: 10578
src/styles/theme-dark.scss (2)
40-43: 优化暗色主题下的金色系列颜色
金色系列颜色值的调整符合暗色主题的设计规范，提供了更好的视觉层次。
119-122: 检查透明度调整的视觉效果
黑色透明度的调整可能影响层级视觉，建议进行 UI 走查。
建议添加设计规范文档，说明不同透明度值的使用场景。
src/styles/variables.scss (3)
1792-1795: 指示器颜色变量的合理调整
使用 $color-text-disabled 作为指示器颜色是个不错的选择，确保了在不同主题下的可见度。
1972-1975: 空状态背景色的优化
使用 $color-background-overlay 作为空状态背景色，保持了与整体设计的一致性。
2104-2104: 网格项的背景色引用调整
改用 CSS 变量引用方式更加灵活，便于主题切换。
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
样式
文档