| Jdlrobson | |
| Mar 4 2024, 4:53 PM |
| F44402870: screenshot 172.png | |
| Apr 4 2024, 12:39 AM |
| F42396424: Screenshot 2024-03-04 at 8.51.16 AM.png | |
| Mar 4 2024, 4:53 PM |
Steps to replicate the issue (include links if applicable):
What happens?:
The controls in the map are not night mode friendly
What should have happened instead?:
You could add the skin-invert class to mw-kartographer-map if you need a quick fix but I imagine it just needs to declare color as white somewhere.
Software version (skip for WMF-hosted wikis like Wikipedia):
Other information (browser name/version, screenshots, etc.):
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T359082#9686681 |
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Temporarily disable dark mode for zoom buttons and such | mediawiki/extensions/Kartographer | master | +65 -54 |
The main issue here is the OOUI icons - could we switch to Codex icon only buttons here ?
https://doc.wikimedia.org/codex/latest/components/demos/button.html#icon-only-button-1
Serious question: The black rectangles on the bright map look somewhat misplaced to me. I mean, the map is not inverted, and probably shouldn't. The footer with the license information is not inverted as well. Why the buttons? Wouldn't it be better to stick to bright buttons in this situation, i.e. exclude them from dark mode?
The black rectangles are OOUI icons from what I can see. I think these should be converted to Codex icons - that would be the most forward-thinking way to fix this (Codex has a dark theme)
Looking at this a bit closer the issue is the rule:
.mw-kartographer-interactive .leaflet-draw-actions a, .mw-kartographer-interactive .leaflet-bar > a { background-color: var(--background-color-interactive-subtle); }Since this is using a CSS design token it gets the color associated with the active theme. It seems like here it should always use the light mode theme. https://phabricator.wikimedia.org/T358826 may be able to help here if that's possible.
A better approach would be to invert the icons by providing a night mode set:
.skin-night-mode-clientpref-1 {
.leaflet-container.dark .map-tooltip .close, .leaflet-control-attribution:after, .leaflet-control-layers-toggle, .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-popup-close-button, .map-tooltip .close, .mapbox-icon {
background-image: linear-gradient(transparent,transparent),url(/w/extensions/Kartographer/lib/external/mapbox/images/icons-dark.svg)
}
}Change 1012694 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/Kartographer@master] Temporarily disable dark mode for zoom buttons and such
Change 1012694 merged by jenkins-bot:
[mediawiki/extensions/Kartographer@master] Temporarily disable dark mode for zoom buttons and such
Thanks @thiemowmde this looks much better. I'll make sure we QA this once it hits production as part of T360464
Status: ✅ PASS
Environment: enwikivoyage
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA
Test Artifact(s):
Visit https://en.m.wikivoyage.org/wiki/Cavite?minervanightmode=1
✅ AC1: The controls in the map are night mode friendly
