fix(docs): make README logo visible in GitHub dark mode - #16
Conversation
Replace the black-on-transparent PNG header icon with theme-aware SVGs that keep the original window, title-bar dots, and waveform motif. Co-authored-by: wl2027 <weil82943@gmail.com>
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![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: 1f5e0bf8b3
ℹ️ About Codex in GitHub
Your team has set up Codex to 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 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <source media="(prefers-color-scheme: dark)" srcset="docs/assets/logo-readme-dark.svg"> | ||
| <source media="(prefers-color-scheme: light)" srcset="docs/assets/logo-readme-light.svg"> |
There was a problem hiding this comment.
When a user's GitHub appearance differs from their OS/browser preference—for example, GitHub is explicitly set to Dark while the OS prefers Light—this <picture> selects logo-readme-light.svg, whose #1f2328 strokes are again nearly invisible on the dark page. The inverse combination similarly puts the near-white variant on a light page, and the fallback <img> is never considered because one of these media queries always matches. Use a single color/background that contrasts in both themes or another mechanism that follows GitHub's selected page theme.
Useful? React with 👍 / 👎.
…emes Drop OS-based <picture> variants. A single #1677ff SVG stays readable when GitHub appearance does not match prefers-color-scheme. Co-authored-by: wl2027 <weil82943@gmail.com>
2 participants
变更说明
GitHub 深色模式下，README 顶部 logo 几乎不可见：原先嵌入的是
src/main/resources/icons/original/arthasWorkbenchDiagnosticWave_128x128.png，黑描边 + 透明背景，叠在 GitHub 深灰背景上会“消失”。这次把 README 头图换成单一中对比品牌色矢量 logo，保留原设计（窗口框、标题栏三圆点、中间锯齿波形），不改 IDE / 插件图标。
做法
docs/assets/logo-readme.svg：真实 SVG 路径，描边/圆点使用与 README badge 一致的#1677ff，并带很浅的窗体填充。@media (prefers-color-scheme)只在同一蓝色家族内微调（浅色#0a66d1、深色#58a6ff），不会切到近黑/近白。因此当 GitHub 外观与 OSprefers-color-scheme不一致时，logo 仍然可读。<img>引用该 SVG，居中布局不变。src/main/resources/icons/original/，未覆盖。第一版曾用
<picture>在近黑/近白两套稿之间切换。Codex 指出这会跟随 OS 而不是 GitHub 主题，已改为单一品牌色方案。Before / After
#ffffff)#0d1117)Brand-blue README logo on GitHub light and dark backgrounds
未改 badges、其它文档截图或插件代码。
验证方式
arthasWorkbenchDiagnosticWave_128x128.svg路径，确认窗口 / 三点 / 波形一致#ffffff与#0d1117上目视确认都清晰（含 OS 为浅色时深色画布上的蓝色稿）<picture>近黑/近白切换，避免 GitHub 主题与 OS 偏好不一致时选错稿UI 或交互变化
仅 README 头图。插件 IDE UI 无变化。
额外说明
Review 时请重点看：单一品牌色是否足够保留原线稿气质，以及在 GitHub Light / Dark（含手动指定主题）下是否都可读。
To show artifacts inline, enable in settings.