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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
