Score currently outputs an SVG with a white background, even on dark mode. Ideally, two seperate images could be generated (maybe with some code snippets inserted from https://wiki.lilypond.community/wiki/Dark_mode_sheet_music) and we could pick and choose depending on whether it is light or dark mode. Simple skin-invert-image would also invert background colours so that won't work.
Description
Description
Details
Details
Related Changes in Gerrit:
| Subject | Author | Repo | Branch | Lines +/- | |
|---|---|---|---|---|---|
| Tweak SVG output to support dark mode colours | Jonathanischoice | mediawiki/extensions/Score | master | +9 -1 |
Event Timeline
Comment Actions
The SVG generated by LilyPond does not have a background. The Score extension wraps the SVG <img> tag in a div with class="mw-ext-score noresize" which is styled to have a white background. All we need to do is remove the white background CSS, and add skin-invert to the div classes, or otherwise tweak the CSS for mw-ext-score to invert the SVG colours. This is well supported by all major browsers, https://caniuse.com/?search=svg
Comment Actions
These two screenshots of part of the discussion on Wikipedia show the result of removing the CSS background rule at .mw-ext-score img and adding skin-invert to the containing div, before and after:
Comment Actions
Change #1313207 had a related patch set uploaded (by Jonathanischoice; author: Jonathanischoice):
[mediawiki/extensions/Score@master] Tweak SVG output to support dark mode colours, T431148
Comment Actions
Change #1313207 had a related patch set uploaded (by Jonathanischoice; author: Jonathanischoice):
[mediawiki/extensions/Score@master] Tweak SVG output to support dark mode colours
Comment Actions
This patch preserves current CSS behaviour for PNG output, and uses the dark mode support class when SVG output is enabled.
Comment Actions
Change #1313207 merged by jenkins-bot:
[mediawiki/extensions/Score@master] Tweak SVG output to support dark mode colours