You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@rocketmq.apache.org by "Frun1na (via GitHub)" <gi...@apache.org> on 2026/10/07 18:01:44 UTC
[PR] fix(web): render panels on theme tokens so dark mode stays readable [rocketmq-dashboard]
Frun1na opened a new pull request, #5662:
URL: https://github.com/apache/rocketmq-dashboard/pull/5662
### Which Issue(s) This PR Fixes
- Fixes #5661
### Brief Description
Six panels hardcoded a light background (and two of them a light border), so in dark mode the theme's light text sat on a near-white panel — measured at 1.08:1 contrast, effectively invisible. Each one now takes the active theme's fill/border token, following the pattern `InfoBanner` already uses:
- `pages/instance/message.tsx` — message body panel (`#f5f5f5` → `token.colorFillQuaternary`)
- `pages/instance/topic.tsx` — route metric tiles (`#fafafa` / `#f0f0f0` → `token.colorFillQuaternary` / `token.colorBorderSecondary`)
- `pages/instance/consumer.tsx` — progress summary card (`#fafafa` → `token.colorFillQuaternary`)
- `components/AlertRuleAssetList.tsx`, `components/GrafanaDashboardList.tsx` — asset preview panels (`#f5f5f5` → `token.colorFillQuaternary`)
- `pages/ai/components/PromptTemplateModal.tsx` — save-current-input block (`#fafafa` / `#f0f0f0` → tokens)
The tokens resolve to the same near-white values in light mode (that is what `InfoBanner` documents), so the light rendering is unchanged; the dark text on the resolved fill measures 9.63:1 instead of 1.08:1. No layout, spacing or content changes are bundled in.
### How Did You Test This Change?
The new case renders the message detail under `theme.darkAlgorithm` and asserts the body panel uses the dark theme's fill token — it fails on the current code with the hardcoded value:
```
$ cd web && npx vitest run src/pages/instance/__tests__/MessagePage.test.tsx -t 'theme fill token'
× renders the message body on the theme fill token so dark mode stays readable
AssertionError: expected 'rgb(245, 245, 245)' to be 'rgba(255, 255, 255, 0.04)'
# with the fix
$ cd web && npx vitest run src/pages/instance/__tests__/MessagePage.test.tsx
Test Files 1 passed (1)
Tests 27 passed (27)
```
Every touched file's own suite passes with the change:
```
$ cd web && npx vitest run src/components/__tests__/AlertRuleAssetList.test.tsx -> 9 passed
$ cd web && npx vitest run src/components/__tests__/GrafanaDashboardList.test.tsx -> 12 passed
$ cd web && npx vitest run src/pages/instance/__tests__/ConsumerPage.test.tsx -> 39 passed
$ cd web && npx vitest run src/pages/instance/__tests__/TopicPage.test.tsx -> 34 passed
```
`npx tsc --noEmit` and `npx eslint` on the touched files are clean. The contrast figures are computed with the WCAG relative-luminance formula over the theme's own values (`colorText` in dark mode is `rgba(255, 255, 255, 0.85)`, `colorFillQuaternary` `rgba(255, 255, 255, 0.04)`).
### Checklist
- [x] One coherent change; unrelated modifications are not bundled in
- [x] Commit subject follows Conventional Commits (`feat:` / `fix:` / `refactor:` / `chore:` / `docs:` / `perf:`)
- [x] Tests added or updated for non-trivial changes, test methods named `...Test`
- [ ] New UI text has both Chinese and English entries under `web/src/i18n/`
- [ ] Architecture constraints stay green (`mvn test` runs the ArchUnit checks)
- [x] New source files carry the ASF license header
- [x] Documentation touched where behaviour changed (README / `docs/` / in-app help)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@rocketmq.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] fix(web): render panels on theme tokens so dark mode stays readable [rocketmq-dashboard]
Posted by "Frun1na (via GitHub)" <gi...@apache.org>.
Frun1na commented on PR #5662:
URL: https://github.com/apache/rocketmq-dashboard/pull/5662#issuecomment-6093184734
Friendly ping — this is still open for review whenever you get a chance. (Keeping it from the stale bot for now.)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@rocketmq.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] fix(web): render panels on theme tokens so dark mode stays readable [rocketmq-dashboard]
Posted by "lizhimins (via GitHub)" <gi...@apache.org>.
lizhimins merged PR #5662:
URL: https://github.com/apache/rocketmq-dashboard/pull/5662
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@rocketmq.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org