To tune styles for dark theme users, the rule @media (prefers-color-scheme: ...) seems to be needed. Currently, "Invalid media query at ..." is shown when saving the css page. We fill update the sanitizer rules to permit usage of prefers-color-scheme within template styles to allow editors to update templates in such a way that appearance can be altered based on color scheme preference.
More information
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
TODO
- The functionality in https://github.com/octfx/mediawiki-extensions-TemplateStylesExtender/blob/master/includes/MatcherFactoryExtender.php#L125 needs to be upstreamed to the CSS sanitizer library https://github.com/wikimedia/css-sanitizer
- Generate a new version of the library
- Update TemplateStyles to use the new composer library
QA steps
- Ping Jon before starting to do QA here. He needs to make updates to https://en.m.wikipedia.beta.wmflabs.org/wiki/Template:Main_page_2020.01_technical_update/styles.css
- Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:MobileOptions and set mode to automatic
- Enable operating system dark mode theme
- Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Main_Page
- Expected: No colors in the boxes!
Production
- Ping Jon before starting to do QA here. He needs to make updates in production.
Visit https://en.m.wikivoyage.org/wiki/Main_Page?minervanightmode=2 should be identical to https://en.m.wikivoyage.org/wiki/Main_Page?minervanightmode=1
{F41915533}{F41915549}
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T241946#9574191 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T241946#9601269 |
.png)
