fix(theme-toggle): visible active state + click feedback#66
Merged
Conversation
Three-state toggle (☀/🌙/💻) buttons looked identical when active — a 16% vs 4% white-alpha background was indistinguishable. Result: scott reported "clicked nothing happens" because the visual signal was missing (and clicking 🌙 while system was already dark really did look like a no-op). Two fixes: - .is-active now renders as a Forge Blue pill (#3B82F6) with inner highlight + subtle glow. Selected state is now obvious at a glance. - Every click triggers a brief scale+flash animation, decoupled from whether the theme actually flipped — so the user always feels the click land, even when their choice matches the current rendered theme (system→dark while OS is dark, etc.). Respects prefers-reduced-motion.
🤖 bot-review (comment-only · phase 1)Diff: Red-line checks:
Phase 1: this bot leaves comments only. Auto-approve will be enabled per-path after 1–2 weeks of clean runs. Promotion plan: judy PR #42 follow-up. |
SymbolStar
added a commit
that referenced
this pull request
Jun 5, 2026
Vision review on PR #66 flagged the flash as 'works but too subtle'; the 6px box-shadow expansion at 55% opacity peak was easy to miss on the 22px button. Push it to 10px expansion at 75% opacity so the pulse actually feels like a pulse without resizing the button (which would shift sidebar bottom layout).
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
1 participant
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.
Designer (@dora) 在 thread 里 trace 出来：原
.is-active是 16% 半透白盖在 4% 半透白上，差 12%，肉眼分不出选中态；加上点 🌙 时系统本来就 dark 完全无视觉变化 → scott 体感「按钮死了」。代码实际生效，是反馈坏了。Designer 已在
designer/theme-toggle-feedback(commit0ba140b) 实现修复，本 PR cherry-pick 过来（仓权限），原 commit author 保留为 designer/jindongfu。改动（影响极小，只动 toggle 那一块）：
.is-active改成 Forge Blue pill (#3B82F6) + 内高光 + 蓝光晕 —— 选中态一眼可见prefers-reduced-motiongetComputedStyle.backgroundColor = rgb(59,130,246)✅；.just-clickedclass 320ms 后被移除 ✅cc @scott @designer，merge 后刷新即可看到效果。