Skip to content

bots: new icon that reads on dark cards - #114

Open
prakashchokalingam wants to merge 1 commit into
get-bb:mainfrom
prakashchokalingam:fix/bots-icon-dark-mode
Open

bots: new icon that reads on dark cards#114
prakashchokalingam wants to merge 1 commit into
get-bb:mainfrom
prakashchokalingam:fix/bots-icon-dark-mode

Conversation

@prakashchokalingam

@prakashchokalingam prakashchokalingam commented Aug 25, 2026

Copy link
Copy Markdown
Contributor

Replaces the bots entry icon with one that stays legible on dark cards.

What's broken

The current icon (icons/bots-48f12e36.svg) hardcodes stroke="#000" on every
path. The marketplace browse list renders URL-based icons in a plain <img>,
where the SVG is an independent document with no access to the host page's CSS,
so the black stroke is painted literally and the icon all but disappears on a
dark card.

Worth noting for anyone hitting this next: currentColor does not fix it.
Inside an <img> there is no page colour to inherit, so it falls back to black.
The SVG has to carry its own theme response.

The fix

icons/bots-1e02e6a9.svg carries prefers-color-scheme rules, with a mid-tone
presentation attribute as the no-CSS fallback:

  • #8a8f98 — fallback: 4.70:1 on dark, 3.03:1 on light (clears 3:1 either way)
  • #52525bprefers-color-scheme: light: 7.21:1
  • #d4d4d8prefers-color-scheme: dark: 10.34:1

Verified in headless Chrome by sampling rendered pixels of the <img>-embedded
SVG under both emulated schemes — #52525b and #d4d4d8 respectively, so the
media query does fire through that path. BB drives this from its own theme
picker (it sets Electron's nativeTheme.themeSource), so the icon follows BB
rather than the OS setting.

The glyph is unchanged — path data is byte-identical to the original. The file
is renamed only to match this repo's content-hash filename convention (first 8
chars of the file's SHA-256).

Entry changes

  • icon.url: ./icons/bots-48f12e36.svg./icons/bots-1e02e6a9.svg
  • Added icons/bots-1e02e6a9.svg, removed icons/bots-48f12e36.svg
  • No other field in entries/bots.json is touched

Checked locally with npm ci && npm run build (built dist/marketplace.json with 82 entries). npm run check — what CI runs — passes here on this PR; my
local run of it only timed out reaching git remotes for two unrelated entries
(notify, ui-tweaks), which is a sandbox network limit on my side, not
something this change affects.


One thing you may want to know, since it is not specific to this plugin

I scanned all 50 SVG icons in icons/:

  • 36 use currentColor, which is a no-op under the <img> path and
    resolves to black
  • 27 hardcode a near-black stroke or fill
  • 0 use prefers-color-scheme — this PR would be the first

So most icons in the marketplace are currently hard to see on dark cards, not
just this one. The narrower fix might belong in BB rather than here: the
marketplace-card <img> branch could paint icons through the same
currentColor mask the installed-plugin icon path already uses, and all 36
currentColor icons would come right with no author action at all.

Happy to leave this PR as the local fix regardless — just flagging it so the
option is on the table before other authors are asked to re-cut artwork.

The icon hardcoded stroke="#000", so on the marketplace browse list — which
renders URL icons in a plain <img>, where the SVG is its own document — it was
painted literally black and was near-invisible on dark cards. currentColor is a
no-op inside an <img>, so the SVG now carries its own prefers-color-scheme
rules with a mid-tone presentation attribute as the no-CSS fallback.

Verified in headless Chrome by sampling rendered pixels: #52525b under light
emulation, #d4d4d8 under dark. Path data is byte-identical, so the glyph is
unchanged. Renamed to match the content-hash filename convention.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@prakashchokalingam prakashchokalingam changed the title fix(bots): make the entry icon legible in dark mode bots: new icon that reads on dark cards Aug 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant