Page MenuHomePhabricator

Support @media (prefers-color-scheme: ...) rule in css-sanitizer
Closed, ResolvedPublic3 Estimated Story PointsFeature

Description

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

QA steps

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

ACStatusDetails
1T241946#9574191

QA Results - Prod

ACStatusDetails
1T241946#9601269

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

How many skins have a night mode? There seems little point in having night-mode-compatible templates if the site doesn't actually have a night mode.

The Citizen skin has a night mode. I can't adapt templates to support night mode in my wiki cuz of this. But apparently the skin's original user and creator, the Star Citizen Wiki (starcitizen.tools), have some custom TemplateStyles with support for prefers-color-scheme...

How many skins have a night mode? There seems little point in having night-mode-compatible templates if the site doesn't actually have a night mode.

The Citizen skin has a night mode. I can't adapt templates to support night mode in my wiki cuz of this. But apparently the skin's original user and creator, the Star Citizen Wiki (starcitizen.tools), have some custom TemplateStyles with support for prefers-color-scheme...

We edited MatcherFactory.php in the TemplateStyles extension to allow the media query. It seems that the file is already integrated into core in master. For one I would hope that the query will be implemented, provided that it is fairly adopted by major browsers other than IE: https://caniuse.com/#feat=prefers-color-scheme

As for night mode, there are multiple skins that I can think of that has a night mode (Citizen, Nimbus, Oynx, various Vector forks). It is also a highly requested feature over the years and brought up again with Desktop Improvement and Dark Mode recently.

How many skins have a night mode? There seems little point in having night-mode-compatible templates if the site doesn't actually have a night mode.

TBH this question seems irrelevant. I would estimate the number of wikis using a dark skin directly is in the 100s-1000s (in fact, the CSS rule definition uses dark and light, not night and day).

That said, I think the 'unstandardized' rationale is sufficient for caution and/or choosing not to implement this at this time. As it happens, there is a separate extension that implements some of the stuff that Tstyles does not at https://www.mediawiki.org/wiki/Extension:TemplateStylesExtender for all you non-WMF wiki users. (Caution with non-WMF extensions is usually advised.)

Izno changed the subtype of this task from "Task" to "Feature Request".Jan 14 2023, 1:55 AM
Tgr renamed this task from Support @media (prefers-color-scheme: ...) rule to Support @media (prefers-color-scheme: ...) rule in css-sanitizer.Feb 1 2024, 11:04 PM
Tgr added subscribers: Repakr, Jdlrobson.
Jdlrobson added subscribers: NatHillard, ovasileva.

@NatHillard @ovasileva for the community to be able to style templates differently in night mode this will be a hard requirement so we should plan accordingly. We'll need to talk to Gergo (and possibly Content Transform team) about this.

The code already exists in https://github.com/octfx/mediawiki-extensions-TemplateStylesExtender/blob/master/includes/MatcherFactoryExtender.php#L125, but it needs to be upstreamed to https://github.com/wikimedia/css-sanitizer

It shouldn't be too hard to upstream this but we will need to request some of Gergo's time. (It sounds like work on this extension is already being planned for Q3 and there would be an opportunity for web team to work with mediaWiki platform).

Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)

Change 1003852 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[css-sanitizer@master] Support @media prefers-color-scheme in rule in css-sanitizer

https://gerrit.wikimedia.org/r/1003852

Patch is ready to review.
I need advisory on versioning and publishing the changes.

  • @cscott will review the patch today and we'll plan to merge it today. He will tag it. There may be an issue with creating tags.
  • Once that's done we'll need to do a publish of the new composer version = New version will be a 5.1.0.
  • We would update TemplateStyles to use the new version (currently it's using 5.0.0 last released in August last year).

Change 1003852 merged by jenkins-bot:

[css-sanitizer@master] Support @media prefers-color-scheme in rule in css-sanitizer

https://gerrit.wikimedia.org/r/1003852

Change 1005528 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/extensions/TemplateStyles@master] Support @media prefers-color-scheme in rule in css-sanitizer

https://gerrit.wikimedia.org/r/1005528

Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Mabualruz.

Change 1005528 merged by jenkins-bot:

[mediawiki/extensions/TemplateStyles@master] Support @media prefers-color-scheme in rule in css-sanitizer

https://gerrit.wikimedia.org/r/1005528

Jdlrobson lowered the priority of this task from High to Medium.Feb 22 2024, 5:32 PM

Change 1006050 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/vendor@master] Update CSS Sanitizer to 5.1.0

https://gerrit.wikimedia.org/r/1006050

The mediawiki/vendor repo still needs to be updated

Change 1006050 merged by jenkins-bot:

[mediawiki/vendor@master] Update CSS Sanitizer to 5.1.0

https://gerrit.wikimedia.org/r/1006050

Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

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!
I'm not exactly sure what "the boxes" are, but I don't see any boxes (except around the version) and no colors.

en.m.wikipedia.beta.wmflabs.org_wiki_Main_Page_minervafontsize=0(iPhone 12 Pro).png (7×1 px, 1 MB)

@Jdlrobson - can we go back and clarify what the outcome of this ticket was in the task description?

Jdlrobson claimed this task.

Done!

Test Result - Prod

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: 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

minervanightmode=1minervanightmode=2
screenshot 623 mn1.png (3×2 px, 3 MB)
screenshot 623 mn2.png (3×2 px, 3 MB)