Toolbar icon contrast — opaque circle, white W, single icon set#14
Merged
Conversation
Replaces the transparent-background W mark with full-bleed colored
circles and a white W. The previous design assumed a light browser
chrome and lost contrast against dark chrome, Firefox themes, Chrome
theme-store skins, and custom enterprise builds — anywhere the bar
behind the icon wasn't roughly white.
- icon-{size}.png WP dark gray (#32373c) circle, white W
(logged out on a WordPress site)
- icon-{size}-active.png WP blue (#2271b1) circle, white W
(logged in on a WordPress site)
- icon-{size}-inactive.png dark gray circle, white W with a
diagonal slash cut through both
(page is not a WordPress site)
Because the icons are now opaque, no `prefers-color-scheme` detection
or runtime variant swapping is needed — the same image works on every
chrome. The slash on the inactive variant is implemented as a mask
cutout so the diagonal reads as missing pixels (revealing browser
chrome) rather than a colored line, keeping the "not WP" signal
clear without introducing a third icon color.
Closes #3.
The mask-cutout approach made the slash adapt to the browser chrome behind it — appearing as a bright white slash on light chrome and a subtle dark slash on dark chrome. The inconsistency drew attention to the wrong thing in light mode. Drawing the slash as a solid `#32373c` line (same as the circle) on top of the white W reads as a clean dark cut wherever it crosses the W, and disappears against the circle's matching gray. Same visual result on any browser chrome.
Safari Web Extensions template-render toolbar icons — Safari ignores
the icon's own colors and paints the alpha shape with the system tint.
The colored full-bleed design from the previous commit was flattened
to a single blue blob in Safari's toolbar, losing the active/inactive
distinction and looking out of place next to other extensions.
Adds a second icon source set under `icons/src/template/` — the
historical silhouette designs that Safari's tinting expects. The
renderer produces both passes:
icons/ — colored (WP blue / dark gray circle, white W).
Used by Chrome. Solves dark-mode contrast.
icons/template/ — silhouette (transparent background, single-
color W mark). Used by Safari. Renders as
a tinted W under any Safari chrome state.
`sync-safari.sh` now copies from `icons/template/`. Safari users see a
clean tinted W like every other extension; the slash on "not WP" still
differentiates that state. Active vs. inactive look the same in Safari
because the tint flattens them — a pre-existing Safari limitation we
can't override without a per-state shape redesign.
This was referenced Jun 6, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the transparent-background W mark with full-bleed colored circles and a white W, so the icon is visible against any browser chrome — dark Chrome, Firefox themes, Chrome theme-store skins, custom enterprise builds — anywhere the bar behind the icon isn't roughly white.
Closes #3.
Why this instead of
prefers-color-schemeswappingThe contrast problem reported in #3 isn't dark-mode-specific. Real-world browser chrome is much more varied than light/dark: Firefox themes can be magenta, Chrome theme store has photographic skins, enterprise builds vary.
prefers-color-schemeonly captures two of those cases, and detecting + swapping at runtime adds amatchMedialistener and dynamicchrome.action.setIconcalls that only solve a subset of the problem.An opaque icon doesn't care what's behind it. One image works everywhere; no detection logic.
What changed
icons/src/wmark.svg#32373c) circle, white Wicons/src/wmark-active.svg#2271b1) circle, white Wicons/src/wmark-inactive.svgThe slash on the inactive variant is implemented as a mask cutout — the diagonal reads as missing pixels (revealing browser chrome) rather than a colored line. That keeps the "not WP" signal clear without introducing a third icon color, and the cutout works against any chrome the same way the rest of the icon does.
PNG outputs regenerated via the existing
scripts/render-icons.js. SafariResources/icons/synced. No code changes:background.js, file-naming convention (''/'-active'/'-inactive'), and the renderer script are all unchanged.Test plan
npm run build(or pull this branch)npm run package:chromeproduces a valid zip; load it, icons display correctlynpm run build:safariand spot-check the Safari container — icons display correctly in Safari's toolbarcd test && npm test— smoke tests still pass (no test changes, but worth re-running)