fix(setting): StatsPage 暗色模式样式适配#15
Closed
Lyn6969 wants to merge 1 commit into
Closed
Conversation
将 StatsPage 中未定义的 CSS 变量（--text-primary / --text-secondary 等） 替换为项目标准的主题变量（--foreground / --muted-foreground / --card / --border 等）， 解决暗色主题下数字卡片、热力图、条形图等组件颜色异常的问题。
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR updates the Stats page styling to align with the app’s design tokens by introducing component-scoped CSS variables and replacing prior ad-hoc/fallback colors.
Changes:
- Added
--stats-*CSS variables for text/surface/card colors. - Replaced previous
--text-*,--card-bg,--border-color, and--bg-secondaryusages with the new variables. - Added a subtle shadow to
.stat-cardand adjusted some borders/backgrounds to use--border/--secondarytokens.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+730
to
+737
| .section { | ||
| --stats-text-primary: hsl(var(--foreground)); | ||
| --stats-text-secondary: hsl(var(--muted-foreground)); | ||
| --stats-text-tertiary: hsl(var(--muted-foreground) / 0.82); | ||
| --stats-card-bg: hsl(var(--card)); | ||
| --stats-card-border: hsl(var(--border)); | ||
| --stats-surface-soft: hsl(var(--secondary)); | ||
| --stats-surface-muted: hsl(var(--secondary) / 0.72); |
Comment on lines
+755
to
+756
| background: var(--stats-card-bg); | ||
| border: 1px solid var(--stats-card-border); |
| border-radius: 8px; | ||
| padding: 16px; | ||
| text-align: center; | ||
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); |
Comment on lines
910
to
921
| .hour-label { | ||
| font-size: 10px; | ||
| color: var(--text-secondary); | ||
| color: var(--stats-text-secondary); | ||
| width: calc(100% / 8); | ||
| text-align: left; | ||
| } | ||
|
|
||
| .hour-label { | ||
| font-size: 10px; | ||
| color: var(--text-secondary); | ||
| color: var(--stats-text-secondary); | ||
| margin-top: 2px; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题
StatsPage（统计页面）在暗色主题下显示异常：数字卡片、热力图、条形图等组件使用了未定义的 CSS 变量（如
--text-primary、--card-bg、--border-color等），浏览器只能回退到硬编码的浅色 fallback 值，导致暗色模式下出现白底白字、对比度错乱等问题。修改
.section作用域下的--stats-*系列 CSS 变量，映射到项目标准的--foreground、--muted-foreground、--card、--border、--secondary等主题变量hsl(var(--border) / 0.65)验证
wails dev启动后，在暗色/亮色主题下切换，统计页面各组件颜色正常跟随主题变化