fix(kimi-web): improve dark mono button contrast#1750
Conversation
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 57d94092d6
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| html[data-color-scheme="dark"][data-accent="mono"] { | ||
| --accent-primary: #e8eaed; | ||
| --color-accent: #e8eaed; | ||
| --color-text-on-accent: #171717; |
There was a problem hiding this comment.
In the dark mono theme, changing the global --color-text-on-accent token to #171717 fixes near-white accent buttons, but this token is also used for non-accent overlay controls on dark backgrounds, such as Composer.vue's .att-video-badge, .att-lightbox-name, and .att-lightbox-close. When a user opens media attachments or sees a video badge in dark mono, those labels/icons become near-black on rgba(0,0,0,...) overlays and are effectively hidden; consider scoping the dark foreground to primary/accent-filled controls or overriding these overlay controls back to a light foreground.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in ab2906f. I rebased onto the latest main, kept --color-text-on-accent for accent-filled controls, and added a stable --color-text-inverse for the dark media overlay. .att-lightbox-name and .att-lightbox-close now use the inverse token. Regression coverage verifies both contracts; the full kimi-web suite (599 tests), typecheck, style check, and build pass.
57d9409 to
ab2906f
Compare
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ab2906f1a8
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| html[data-color-scheme="dark"][data-accent="mono"] { | ||
| --accent-primary: #e8eaed; | ||
| --color-accent: #e8eaed; | ||
| --color-text-on-accent: #171717; |
There was a problem hiding this comment.
In dark mono mode (and the repeated system-dark override below), this global token now resolves to #171717. The shared switch thumb uses background: var(--color-text-on-accent) in apps/kimi-web/src/components/ui/Switch.vue:51 even when the switch is off, while the off track remains the dark --color-line-strong; this makes every off switch in Settings nearly a dark thumb on a dark track (~1.8:1 contrast). Please either limit the dark foreground to accent-filled states or override the off-state switch thumb to a light/inverse fill.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fixed in 8a9d3ca. The off thumb now uses --color-text-inverse; the .is-on state explicitly switches back to --color-text-on-accent. This restores dark mono off-state contrast to 9.85:1 while preserving 14.87:1 for the on state. Regression coverage now locks both state-specific token contracts; the full kimi-web suite (601 tests), typecheck, style check, and build pass.
ab2906f to
8a9d3ca
Compare
|
@codex review |
|
Codex Review: Didn't find any major issues. Bravo. Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
|
你可以贴张效果图嘛 |
2 participants
Summary
Testing
pnpm --filter @moonshot-ai/kimi-web testpnpm --filter @moonshot-ai/kimi-web typecheckpnpm --filter @moonshot-ai/kimi-web check:stylepnpm --filter @moonshot-ai/kimi-web exec vite build --logLevel warn#171717on#e8eaed(14.87:1)Fixes #1721