Page MenuHomePhabricator

How should Template:Color work in night mode?
Closed, ResolvedPublic

Description

Background

Various wikis use a template that allows editors to use any color without limitation:
https://en.m.wikipedia.org/wiki/Special:WhatLinksHere/Template:Color
For obvious reason this is not compatible with night theme.

We should talk to the communities about how this should work. For example, one solution might be to always set a white background when this happens.

User story

As a reader I expect all content in an article to be readable in the night mode theme.

Acceptance criteria

Communication criteria - does this need an announcement or discussion?

  • Add communication criteria

Event Timeline

Tagging this for sprint 1, although the first step here is probably going to be scheduling a meeting to discuss

These are the options here that I can see and they should be made on a per-project basis. I don't think we can or should do anything on our side.

  1. The template is modified to always have a white background.
  2. The color should be inverted (if the information is not semantic)
  3. We remove the content (if the information is not semantic)
  4. The template itself should accept more than one color (e.g. specify color for different themes).

The following questions structured around the 5W1H model can help gather more context and understand the requirements:

  1. What challenges are currently faced with Template:Color in night mode?
  2. Why is it important to adjust Template:Color for night mode?
  3. Who are the primary users affected by the current implementation of Template:Color in night mode?
  4. Where in the templates or articles does the color rendering become problematic in night mode?
  5. When do changes need to be implemented to avoid disrupting user experience?
  6. How can Template:Color be adjusted to maintain readability and accessibility in night mode without sacrificing design integrity?

I would be curious to hear from @Izno @Lofhi and @Nux about how they think Template:Color should behave in the night theme.

Lol.

Somewhere in order of preference, but which better consensus than my opinion would be needed:

  1. Ban its use in main space. All valid uses transitioned to specific "semantic" templates and the rest removed (e.g. sports already has some that could be called "semantic").
    • 500k total transclusions, 175k of which are in main space. This plan seems infeasible on any useful timeframe.
  2. Always set a white background maybe? Probably some are being used in templates that are setting a background color separately?...
  3. Worst comes to worst, TemplateStyles removes the color on dark?

This one you might as well drop a notice and be like "this template sucks and you all need to sort out what you want to do about it" somewhere not in a technical space.

Thanks for the perspective @Izno - very helpful! Do you think there are any cases on English Wikipedia where it is used semantically?

I'm with Izno on that (especially with point 1). That particular template feels like even/odd modules in npm [:

I think maybe we can at least discourage things like that within communities. Some of the usages can probably removed (especially when used in other templates and modules).

Jdlrobson triaged this task as Medium priority.Apr 1 2024, 10:45 PM
  1. Ban its use in main space. All valid uses transitioned to specific "semantic" templates and the rest removed (e.g. sports already has some that could be called "semantic").
    • 500k total transclusions, 175k of which are in main space. This plan seems infeasible on any useful timeframe.

So a more accurate count is 10k uses directly in mainspace, which means the other 165k are entering via templates. I suspect most of those are in navboxes. Eyeballing the relevant search looks like that's a good judgement, with about 9k uses there (and a fanout of 1 template to 20 articles is not in the realm of unreasonable). The uses there make it look like T200704: TemplateStyles don't work when the template is inside a link is a blocker to any sort of direct transition using the same template to TemplateStyles. I'd hazard a guess most of the navbox cases have the "brand" color intent which means setting them against white backgrounds everywhere is maybe not a win either. In these uses those the ad hoc colors are usually against other ad hoc background colors, which means they aren't a big deal at all.

The other couple I've spotted in the searches are colors for "up/down" arrows e.g. population change which would are good colors to preserve....

These cases of color have a viable path forward to fixing if we wanted to, but IDK what kind of timeline could get it done. I think the plan of attack for something like that would be making a templatestyles sheet for each brand - e.g. for the Seattle Sounders make a [[Template:Brand colors/Seattle Sounders/styles.css]] with content that looks something like

.brand-color-seattle-sounders,
.brand-color-bg-seattle-sounders {
    /* background color here */
}

.brand-color-seattle-sounders,
.brand-color-fg-seattle-sounders,
.brand-color-seattle-sounders a {
    /* foreground color here */
}

and then migrate everywhere by adding classes and the TemplateStyles page to places it's used... This makes a lot of brand colored styles pages which are harder to manage than at least one of the alternatives today (e.g. Module:College color/data which does contrast checking).

IMO this template is more or less fundamentally "ad hoc colors" which we have many in the wild anyway, so I'm not sure this task has a ton of merit anyway. There's no convenient one size fits all solution for this one, which is the same issue as the general.

I suggest declining this ticket

I think this is something that needs to be fixed on the wiki itself not by Wikimedia staff in the software.

My advice here is to disable the colors in night mode and provide a good opportunity to guide editors that want colors in night mode to use more semantic namespaces. The existing notheme class can be used by editors to express that the colors are semantic and also switch to day theme.

For https://en.m.wikipedia.org/w/index.php?title=Polio#Epidemiology for example I have added the notheme class. I've also created the stylesheet https://en.m.wikipedia.org/wiki/Template:Color/styles.css to disable colors that have not been marked as notheme.

Let's see what problems this causes before recommending to other projects...

I can only agree with @Izno. There is no simple solution. These types of template are also massively used, so they are also stuck behind edit protections. It's hard to do something without needing days of work for even small changes... without the role. I guess the only solution is for WMF to inform the communities directly that these inline color uses are to be avoided. But this has been common practice for 20 years... I don't know if the existing MediaWiki doc-page will suffice.

But the "templatestyles sheet for each brand" is something that need to be adopted. "Ad hoc colors" should be avoided, but color palettes should be offered to help communities understand the problem and support communities uses. Moreover, creating these palettes greatly facilitates the integration of night mode. This will be the case, for example, for the thematic infoboxes on frwiki (green for biology, red for YouTubers, etc). I can't find another alternative than more globally using tested color palettes.

The most important thing is to make sure that when colors are used to convey information, they're reworked (i.e: using forms instead for example). For the rest, if it's just a matter of looking good and not bothering anyone...

Jdlrobson claimed this task.

I don't think there's anything left to do here in the software except defer to communities to make sensible (albeit complicated) decisions here. I've linked to this phabricator discussion on https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis#Examples

Thanks for the useful conversation here!

(Also despite resolving the ticket - feel free to continue the conversation if you have any more insights!)