Repository navigation
feat(badge): follow the reader's light or dark theme in images by default, on GitHub too - #227
Conversation
…ault, on GitHub too
Latest result Pull request merged. Final answersSession Pull request merged. Session Waiting for GitHub merge request f260c046-905f-4da4-908c-8cdae0946f07. Session Waiting for review checks before the next pass. Session Waiting for review checks before the next pass. Session Waiting for review checks before the next pass. Session Waiting for review checks before the next pass. Session Waiting for review checks before the next pass. Session Waiting for review checks before the next pass. Session Waiting for review checks before the next pass. |
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
Important
Safari does not currently inherit an embedding element's color-scheme into an SVG image, so the new default cannot reliably follow a reader's selected GitHub theme there.
Reviewed changes reviewed the complete initial diff for the badge SVG theme default, hosted response policy, builder preview, tests, documentation, and agent reference.
- Adaptive SVG paint moves theme-dependent colors into SVG-local CSS and adds
auto,light, anddarkbehavior across all image badge styles. - Hosted badge policy permits the inline SVG stylesheet while retaining the restrictive default source and sandbox policy.
- Builder preview makes Auto the default and shows the generated image under separate light and dark embedding contexts.
- Public contract updates canonical parameters, package documentation, tests, and the Comark UI skill for the new default.
gpt-5.6-sol ｜ 𝕏
comark-annotate
comark-badge
comark-cards
comark-carousel
comark-cast
comark-charts
comark-chat
comark-chips
comark-cjk
comark-code
comark-code-notes
comark-colors
comark-critic
comark-deflist
comark-details
comark-diagrams
comark-diff
comark-embed
comark-fields
comark-figure
comark-file-tree
comark-footnotes
comark-github
comark-icon
comark-include
comark-keys
comark-links
comark-linter
comark-mark
comark-mathml
comark-media
comark-metrics
comark-outline
comark-properties
comark-qr
comark-quiz
comark-reading-time
comark-sources
comark-steps
comark-table
comark-tabs
comark-tests
comark-ui
comark-xref
comark-zoom
commit: |
|
Pullfrog’s Safari finding is a valid P2 browser-compatibility documentation gap confirmed by the current SVG media query and open WebKit issue 316640; I’m declining a standalone documentation push under this PR’s repair policy, preserving the adaptive default and explicit light/dark overrides, and resolving the thread as non-blocking. |
Image badges were always drawn light unless the URL asked for
theme=dark, so the README's badges showed as white pills on GitHub's dark theme.An image badge now carries both palettes by default (
theme=auto): its colors live in a<style>with aprefers-color-scheme: darkblock, and the layout is the same in both. Inside an<img>, that media query follows thecolor-schemeof the page around the image, which GitHub sets from the reader's GitHub theme, not the OS. So one Markdown line follows the theme on GitHub, npm, and the docs, with no<picture>.theme=lightandtheme=darkstill lock a badge to one palette.svg.ts: every color that changes with the theme is a class in one<style>, for all three styles. Status dots use the brighter tones on dark, as before.server.ts: the CSP allows inline styles, so the badge still has its colors when someone opensbadge.svgin a tab. GitHub's image proxy already sendsstyle-src 'unsafe-inline'.Autois the default theme, and its preview shows the badge on a light half and a dark half.Checked
color-schemeset the opposite way from the OS (as when someone forces GitHub dark on a light OS): the image follows the page every time, forhttp:anddata:sources. WebKit wouldn't launch on this machine, so Safari isn't checked yet.