v0.9.22
AutoBuddy v0.9.22
修复每日任务页顶部四项数据框在深色主题下不变色。
问题
深色主题下,每日任务页顶部那块「今日积分 / 签到积分 / 任务积分 / 总积分」
的四项数据框仍是一块白底,和整体暗色页面格格不入。
根因:背景色被写死
.wb-dl-credit-card 里:
background: rgba(255,255,255,.7); /* 硬编码白色 */讽刺的是,同一处代码的注释里明明记着官方规格是 bg-card/70
(跟随主题变量)—— 实现与注释自相矛盾。
实测证据
1280px 视口、深色主题下取 computed style:
| 项目 | 取值 | 判定 |
|---|---|---|
--card |
oklch(27.9% .041 260.031) |
✅ 主题变量正常 |
body 背景 |
oklch(0.208 0.042 265.755) |
✅ 已变暗 |
| 本框背景 | rgba(255,255,255,0.7) |
❌ 没跟上 |
| 文字色 | oklch(0.929 0.013 255.508) |
✅ 跟随了 |
| 边框色 | oklch(1 0 0 / 0.1) |
✅ 跟随了 |
也就是说:文字和边框都正常跟随主题,唯独背景是写死的 ——
所以现象精确地表现为「深色页面里嵌一块白底卡片」,而不是整体都不对。
修复
background: color-mix(in oklab, var(--card, #ffffff) 70%, transparent);与官方积分统计页的 bg-card/70 完全对齐。
⚠️ 一个容易踩的坑
--card 是 oklch 格式(oklch(27.9% .041 260.031)),不是 hex。
所以不能用项目里常见的那种老写法:
color-mix(in srgb, var(--card, #0f172a) 92%, transparent) /* ❌ 兜底是 hex */srgb 空间 + hex 兜底在 oklch 变量下语义不对。这里必须指定
in oklab,且变量缺失时退回中性半透明色,而不是又变回固定白。
顺带做的检查
全量复查了页面内其它硬编码浅色,确认都不是同一类问题:
| 位置 | 内容 | 判定 |
|---|---|---|
.wb-modal-btn |
蓝色按钮 #3b82f6 + 白字 |
按钮主色,非背景 |
| toast | color: #ffffff |
深色浮层上的前景白字 |
这两处保持原样。
验证
四模块 AST ✅ 通过
注入 JS node --check ✅ 通过
15 项单元测试 ✅ 全绿
版本一致性自检 ✅ 通过
部署后实测 深色主题下背景跟随 --card 变化
升级说明
重建容器即可,/data 数据不受影响。
- 无新增或删除环境变量;
- 无数据库结构变更;
- 本次为纯前端样式调整,无后端逻辑变更。