Frun1na opened a new issue, #5661: URL: https://github.com/apache/rocketmq-dashboard/issues/5661
### Before Creating the Bug Report - [x] I have searched the [open issues](https://github.com/apache/rocketmq-dashboard/issues) of this repository and believe that this is not a duplicate. - [x] This is a defect in RocketMQ Studio, not a usage question and not a defect in another Apache RocketMQ repository. - [x] I can reproduce this on the current `master` branch, or I have stated the exact version I am running below. ### Studio Version branch: `rocketmq-studio` git commit id: `6a68042f` deployed as: built from source ### Runtime Environment OS: Ubuntu 22.04 (WSL2) MySQL: not applicable — the defect is in the pages' inline styles browser: any (the dark theme is applied by antd, not by the browser) ### Connected RocketMQ Cluster RocketMQ version: not applicable — the affected pages read from mock mode or the selected instance access mode: not applicable deployment: not applicable ### Describe the Bug Several panels hardcode a light background instead of taking the active theme's fill token. The pages' text color comes from the theme (`AntdApp` sets `colorText`, which the dark theme resolves to `rgba(255, 255, 255, 0.85)`), so in dark mode the text is light and the panel behind it stays near-white: - message detail body panel — `web/src/pages/instance/message.tsx` (background `#f5f5f5`) - topic route metric tiles — `web/src/pages/instance/topic.tsx` (background `#fafafa`, border `#f0f0f0`) - consumer progress summary card — `web/src/pages/instance/consumer.tsx` (background `#fafafa`) - two asset preview modals — `web/src/components/AlertRuleAssetList.tsx` and `GrafanaDashboardList.tsx` (background `#f5f5f5`) - prompt-template "save current input" block — `web/src/pages/ai/components/PromptTemplateModal.tsx` (background `#fafafa`, border `#f0f0f0`) Measured contrast (WCAG relative luminance, same formula the palette uses): the dark theme's text on `#f5f5f5` is **1.08:1**, which is effectively invisible; the same text on the theme's own fill token (resolved to `rgb(51, 51, 54)` on the dark container) is **9.63:1**. In light mode the same panels are unaffected, because the fill token resolves to the same near-white value they hardcode today. The repository already has the correct pattern: `InfoBanner` uses `token.colorFillQuaternary` / `token.colorBorderSecondary` with a comment that the colors follow the theme, and the AI page exposes tokens as CSS variables for the same reason. ### Steps to Reproduce 1. Open the console and switch the theme to dark (the toggle in the top bar, `layout.switchToDarkTheme`). 2. Open a message detail on the Message page, the route summary tiles on the Topic page, the consumption-progress tab on the Consumer page, or an asset preview modal. 3. The panel is still light grey while the text inside it is light: the content is unreadable until it is selected. ### What Did You Expect to See? Panels use the theme's fill and border tokens, so they follow the active theme — the light-mode rendering stays as it is today. ### What Did You See Instead? Hardcoded `#f5f5f5` / `#fafafa` backgrounds (and `#f0f0f0` borders) that ignore the theme, leaving light text on a light panel in dark mode. ### Additional Context - the dark theme is a first-class feature (`StudioApp` applies `theme.darkAlgorithm`, `MainLayout` carries the toggle); a previous dark-mode fix was merged as #2344. - the affected panels are plain `<div>`/`<Card>`/`<pre>` elements with inline styles, so no antd theme override can reach them. ### Are You Willing to Submit a Pull Request? - [x] Yes, I am willing to submit a pull request. -- 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]
