Page MenuHomePhabricator

Support prefers-color-scheme in css-sanitizer
Closed, DuplicatePublicFeature

Description

Feature summary: I want to be able to write a template style that checks if dark mode is used such as a dark or black theme of the mobile app and change the color of the text in a template from dark to white for readability of the text.

Use case(s): There is a problem with recognizing text that is formed by a template (https://uk.wikipedia.org/wiki/%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD:Masklink) in the mobile app Wikipedia that uses a dark theme. That template uses inline CSS styling, so I tried to create a template style that will change color if a user uses dark mode. But the instruction provided here (https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis) doesn't work with sanitized CSS (template style of template). So for now, the text is unreadable in the dark theme of the mobile app.

The text in parenthesis is unreadable:

Screenshot_20231220_214005_Wikipedia.jpg (229×1 px, 21 KB)

Benefits: Some templates have to have a specific color, so for readability, editors can write code that will modify the color and make it more accessible in dark mode.

Event Timeline

I discussed this in T284327#7334686, so, good to see a task.

Tgr renamed this task from A way to change a color using Templatestyle if user uses a dark mode to Support prefers-color-scheme in css-sanitizer.Feb 1 2024, 11:03 PM
Tgr added a project: css-sanitizer.
Tgr moved this task from Backlog to External (css-sanitizer) on the TemplateStyles board.
Tgr moved this task from Unsorted to W3C Working Draft (or earlier) on the css-sanitizer board.
Tgr subscribed.

Oops, this had a task already.

I don't think this is correct to dupe. The request is not for prefers-color-scheme here but instead a method to do color checking. As I specified in the linked comment, a class on body or html would also suffice, and as I have made a point of repeatedly at this point, is the only way to smoothly transition Things from light-only to dark or light modes.

As I specified in the linked comment, a class on body or html would also suffice

Possibly, but that would be a skin request, not a TemplateStyles request.

True. I don't know why Reedy added TemplateStyles to this task. :)

Probably because it was in the title and task description? Anyway, feel free to reword and reopen if you think a task asking for a top-level dark mode class would be useful.

if you think a task asking for a top-level dark mode class would be useful.

We are currently in the process of discussing this as part of introducing night mode to Vector and Minerva skins in web.
You should be able to do this:

@media (prefers-color-scheme: dark) {
    /* skin-night-mode-2 means respect the browser preference (automatic mode) */
    .pane {
      background-color: black;
      color: white;
    }
}

In Vector/Minerva we will add the following CSS rule which will ensure that any CSS in a media query is applied.

html.skin-night-mode-clientpref-1 {
	color-scheme: dark;
}

The existing gadget on English Wikipedia could also add the following to get the same effect:

.client-dark-mode {
   color-scheme: dark;
}

From a template perspective you shouldn't need to make use of a class on the HTML element unless I'm misunderstanding something?