Dark mode flips inadvertently on Wikipedia

[Tomalak]

On the English Wikipedia there is an experimental "dark mode" available.

Unfortunately, it seems to do the opposite to the 10ten popup, which I have set to "dark" as well.

I'm using the "Vector (legacy)" Wikipedia style here, the dark/light toggle is in the top right.

[birtles]

I managed to reproduce this and it looks like Wikipedia just adds a filter to the whole page:

html, html img, html video, html ogvjs, html svg, html iframe, html .mw-no-invert, html td .diffchange, html .mwe-math-element, html .wvui-typeahead-suggestion__thumbnail, html .skin-minerva .mw-notification-visible .mw-notification-content, html .cdx-menu-item__thumbnail, html .cx-slitem__image, html .mw-mmv-overlay, html .mw-mmv-pre-image, html .media-viewer .image img, html .media-viewer .mw-file-description img, html .mw-kartographer-map, html .mw-kartographer-mapDialog-map, html .oo-ui-searchWidget-results .oo-ui-iconElement-icon, html .list-thumb, html .ext-related-articles-card-list .ext-related-articles-card-thumb {
  filter: invert(1) hue-rotate(180deg)
}

As a result, everything under the root html element gets inverted.

If we could get a selector matching our popup (e.g. #tenten-ja-window) added to that selector it would cancel out the inversion.

More simply, perhaps we can just add our own style rule somewhere:

html.client-dark-mode #tenten-ja-window {
  filter: invert(1) hue-rotate(180deg);
}

[Tomalak]

Ah, that makes sense.

There is a selector html .mw-no-invert that seems to be intended to do just that.

I found: https://www.mediawiki.org/wiki/Extension:DarkMode#Excluding_elements_from_dark_mode

The Wikipedia dark mode seems very much experimental at this stage, and they probably will not go with this particular approach in the end, so it's doubtful if it's worth the bother of a custom fix?

I can live with it, now that I know where it comes from.