[RedwindA]

⚠️ 提交说明 / PR Notice

English template: .github/PULL_REQUEST_TEMPLATE/en.md

Important

• 描述可用 AI 辅助。提交前请审阅并精炼全文，仅保留维护者需要复核的要点，并声明对其负责。PR 正文及后续评论均不得直接粘贴未经人工过滤的大段 AI 文本；多次提交此类内容可能会被 block。
• 开启透传请勿反馈问题；透传会直接发送内容，不会经过 new-api 的逻辑处理。
• 请按本模板填写后再提交。

🔗 关联任务 / Related Issue

• None

🚀 变更类型 / Type of change

• 🐛 Bug 修复 (Bug fix)
• ✨ 新功能 (New feature)
• ⚡ 性能优化 / 重构 (Refactor)
• 📝 文档更新 (Documentation)

📝 变更描述 / Description

改善了暗色模式的用户体验

问题： 主题 class（html.dark / html.light）要等 React 挂载后才由 ThemeProvider 加上。

1. 在深色模式下刷新页面，JS bundle 加载完成前页面会先白屏闪一下。
2. Dark Reader 等浏览器扩展只在页面加载时检测一次 html.dark / color-scheme。它错过了主题 class，就会把 new-api 自带的深色主题再反色一遍。

改动：

• web/index.html：在 <head> 中加入内联脚本，首次绘制前读取 localStorage['newapi:theme:v1:mode']，值为 system 或无效时跟随 prefers-color-scheme，再把 dark / light class 加到 <html> 上。解析逻辑与 ThemeProvider 保持一致。
• web/src/styles/theme.css：.dark 增加 color-scheme: dark，Dark Reader 会读取这个属性。
• 新增 web/src/context/__tests__/theme-boot-script.test.ts：直接从 index.html 提取脚本执行，覆盖 保存为 dark / 保存为 light 但系统为深色 / 未保存且系统为深色 / 保存值无效 四种情况。

📸 运行证明 / Proof of Work

1. 单元测试

$ cd web && bunx vitest run src/context/__tests__/theme-boot-script.test.ts
 Test Files  1 passed (1)
      Tests  4 passed (4)

2. 刷新白闪对比（录屏）

refresh-compare.mp4

慢速模式

3. Dark Reader 检测

✅ 提交前检查项 / Checklist

• 人工确认: 无论描述是否由 AI 生成，我已审阅并精炼全文，仅保留可复核的要点，并声明对其准确性与完整性负责。PR 正文及后续评论均未直接粘贴未经人工过滤的大段 AI 文本。
• 非重复提交: 我已搜索现有的 Issues 与 PRs，确认不是重复提交。
• 新功能关联 Issue: 若此 PR 标记为 New feature，我已关联对应 Issue；若尚无 Issue，我已先自行创建。
• 事前沟通: 若改动较大或涉及方向性变更，已在关联 Issue 中与维护者沟通并达成一致。
• 功能范围: 本 PR 不是 Coding Plan、逆向渠道、第三方封装接口，也不是对 Codex 渠道类型的改动。
• 非透传: 本 PR 不是针对开启透传后的转发行为；透传会直接发送内容，不会经过 new-api 的逻辑处理。
• 范围聚焦: 本 PR 为一项聚焦改动，未包含无关代码。
• 本地验证: 已按变更路径实际验证，并写明命令与观察结果。仅声明 go build 通过或测试通过，不视为有效证明。
• 安全合规: 代码中无敏感凭据，且符合项目代码规范。

Summary by CodeRabbit

• New Features

  • The selected theme now appears before the page’s first render, reducing flashes of the wrong theme.
  • Native controls now follow the dark theme.

• Tests

  • Added coverage for saved theme preferences and system-mode fallback.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: ea1c6b00-e9ff-491b-aab8-ad422e96ec82

📥 Commits

Reviewing files that changed from the base of the PR and between c2b7a9a and 86d5a85.

📒 Files selected for processing (3)

• web/index.html
• web/src/context/__tests__/theme-boot-script.test.ts
• web/src/styles/theme.css

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

The page now resolves and applies a theme before first paint. The dark theme declares color-scheme: dark, and tests cover saved, missing, and invalid theme preferences.

Changes

Theme initialization

Layer / File(s)	Summary
Theme boot and dark styling web/index.html, web/src/styles/theme.css, web/src/context/__tests__/theme-boot-script.test.ts	The inline script applies a saved dark or light preference, or uses the system preference when the saved value is missing or invalid. Storage errors fall back to system mode. The dark theme declares color-scheme: dark. Tests cover the preference cases.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Suggested reviewers: calcium-ion

Merge Risk: ⚪ Minimal · up to 86d5a

The saved or system theme is applied consistently before and after the app mounts. No identified issue prevents merging after normal checks.

Security Architecture Review

Security architecture risk: 🔵 Low · up to 86d5a

The new step reads a saved display preference and applies a theme class; it does not appear to expose data or grant authority. Whether every deployment permits the new inline script remains unverified.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The new code’s independently influenceable input is the browser-local preference; its observed output is the document’s theme class, not a privileged operation or data-store write.

Trust Boundaries and Controls

• observed — The boot script accepts only dark and light as stored outcomes and falls back to the system preference for other values; the runtime storage reader independently validates values against its allowed set.

Hardening Proposals

• proposed — Where a deployment enforces a restrictive script policy, authorize this specific boot script without broadly permitting inline scripts.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 1 files. (2 skipped: 2 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary change: applying the theme before first paint to prevent a light flash and Dark Reader misdetection.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 1 files. (2 skipped: 2 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit checks the morning light
And reads the saved theme just right
If none is found, the system guides
A dark mode paints the native sides
Before first paint, the colors gleam}

_{Comment @coderabbitai help to get the list of available commands.}