I'm not sure how we'd accomplish this in a performant way for anonymous users considering the HTML is cached (we could do it after pageload like the gadget), but I can see it working for logged-in users and creating a more unified night-mode experience.

You can really only do it with JS I think, because you also need to respond to the OS changing it in automatic mode while the page is already loaded.

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

[mediawiki/core@master] Support skins setting their own theme color

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

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

[mediawiki/skins/MinervaNeue@master] Set Minerva color scheme

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

MobileFrontend has some handling for theme that would need to be revised in preparation for this. Adding platform team in case they have any opinions about the necessary core change that will be required to unblock this: https://gerrit.wikimedia.org/r/1032089

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

[mediawiki/extensions/MobileFrontend@master] Upstream theme-color to core/skins

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

Tagging Mediawiki-engineering on this ticket and related ones due to pending ownership discussion.
cc: @MNadrofsky @Bmueller

I personally think that specifying theme-color from skin.json as in https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1032089 is not a good idea. It should be provided by a function of the skin, so that skins can provide it dynamically based on the page being rendered.

I can easily think of situations where page layout differs so that the color depends on the page you are rendering (a theme color per namespace for instance).

We can already see how this doesn't scale for light mode vs dark mode.. What if like the iOS/Android apps, you have 4 themes ? light/dark/sepia/black ?

In T364285#9835234, @TheDJ wrote:

I personally think that specifying theme-color from skin.json as in https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1032089 is not a good idea. It should be provided by a function of the skin, so that skins can provide it dynamically based on the page being rendered.

I can easily think of situations where page layout differs so that the color depends on the page you are rendering (a theme color per namespace for instance).

We can already see how this doesn't scale for light mode vs dark mode.. What if like the iOS/Android apps, you have 4 themes ? light/dark/sepia/black ?

I think these would be handled via JavaScript. My main thinking around the core patch I posted was that the dark theme and light theme can be done in a way which is friendly with our Varnish cache without the theme changing several seconds after the page has finished loading. How about generalizing this further: e.g. using a template or simply allowing the addition of an arbitrary amount of meta tags via skin options like so?

e.g.

[
      'meta => [
          ['theme-color', '#333' ],
          ['theme-color', '#fff', '(prefers-color-scheme: dark)' ]
      ]
]

@ovasileva we need to talk to MediaWiki engineering before working on this one.

Change #1032090 abandoned by Jdlrobson:

[mediawiki/skins/MinervaNeue@master] Set Minerva color scheme

Reason:

Seems like this needs more discussion on the ticket / core patch before we can work on this.

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

Change #1032091 abandoned by Jdlrobson:

[mediawiki/extensions/MobileFrontend@master] Upstream theme-color to core/skins

Reason:

Blocked on https://gerrit.wikimedia.org/r/c/mediawiki/core/+/1032089 - will wait for that to play out before restoring.

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