English Wikipedia has a gadget you can enable (after you login) that adds Dark Mode.
This is the CSS that is applied to the whole page:
@media screen {
html {
height:100%
}
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)
}
html .skin-vector .mw-logo-wordmark,
html .skin-vector .mw-logo-tagline,
html .skin-timeless .mw-wiki-title > img,
html .wvui-icon svg,
html .mw-ext-score img,
html .mw-hiero-table img {
filter:none
}
}
It reverses the colors with a filter and reverses them back on images. This seems to work like XOR. When applied two times it seems to cancel the effect.
I have a bookmarklet - Scheme REPL and When I apply the below CSS in Firefox DevTools:
.shell-wrapper {
filter:invert(1) hue-rotate(180deg)
}
The content of the bookmark disappears. Why does reversing of colors work for images but not for my Bookmark? Why did the bookmark disappear?