ID Dark Mode

[CharliePlett]

Hey, could we please have a dark mode?

[quincylvania]

Hi and welcome, @CharliePlett.

Dark mode definitely sounds cool. I mention it as a missing vision feature in our accessibility documentation. The toughest part will likely be maintaining two UI styles that are both look and work great.

[mxdanger]

@quincylvania Hi, I just wanted to add to this conversation and say that before we can begin working on a dark mode, all the CSS color values in ID should be replaced with CSS variables. Compatibility will not be a problem as every browser supports CSS variables except for IE, which ID has discontinued support for.

This makes standardization easier for the existing light theme and implementing dark mode would be as easy as setting up CSS variables that overwrites the light theme. This would allow for easily maintaining both themes side by side.

All the theme switching would be handled by the browser based on what the user has already selected as their theme preference for their OS. This does not require any custom JS theme switcher and is the recommended way for accessibility and respecting the user's choice. Both code snippets use light mode as the default fallback if the user has no preferred theme.

Example with media query prefers-color-scheme for changing the CSS variables. Related link: MDN

:root {
    --color-text-primary: #000;
}
@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #fff;
    }
}

The meta color-scheme tag is also particularly useful as it changes the user agent stylesheet, and for ID it would be primarily used for dark themed scrollbars and plain form controls such as checkboxes or radio buttons. Related links: web.dev, CSSWG

<meta name="color-scheme" content="light dark">

[quincylvania]

We haven't abandoned support for IE 11, though it's true we're not actively testing it nor expecting all features to work perfectly. I think we can still use CSS variables but have PostCSS convert them to legacy CSS at build time.

For dark mode, lots of sites have a Light/Dark/Match System selection control that I think works well. We could add one for iD in the Preferences pane.

[1ec5]

We haven't abandoned support for IE 11

By way of an update, we mostly if not completely dropped IE11 support in #8811.

The solid black “none” background feels more at home in dark mode. #9307 would change the background to white, but maybe a black option could be restored as part of dark mode support.

[AntonKhorev]

I was doing dark mode in osm-website, so I decided to do it here too.

Preview:
https://github.com/AntonKhorev/iD/tree/x/dark-mode

[1ec5]

As noted in #10542, openstreetmap/openstreetmap-website#4761 enabled dark mode support on the OSM website, including the main map (sort of), so users with dark mode enabled may find transitions to iD a little more jarring than before.

[VlctM]

It's cool to have dark mode, but imo that dimmed map looks horrible.

[Nekzuris]

For now, apply this CSS with an extension like Stylus

@media(prefers-color-scheme: dark) {
 .leaflet-tile-container, .leaflet-tile {
    filter:brightness(1) !important 
   }
}

edit: updated CSS

[Nekzuris]

This CSS also fix performance issue on Firefox when panning because the css filter: brightness(0.8) is not well optimized.

Edit: this is not wide spread issue on Firefox, here is a bug report https://bugzilla.mozilla.org/show_bug.cgi?id=1826576
and I manage to resolved my problem here openstreetmap/openstreetmap-website#5328 (comment)

[Nekzuris]

I was doing dark mode in osm-website, so I decided to do it here too.
Preview:
https://github.com/AntonKhorev/iD/tree/x/dark-mode

@AntonKhorev sorry for missing this, it looks very good 👍
I noted that the save button, view-on-osm and many icons are still missing:

also remove-icon:

keyboard shortcuts:

section-issues-status:

issue-message:

[AntonKhorev]

How exactly to continue with dark mode here depends on whether openstreetmap/openstreetmap-website#5339 gets merged.

Save button is a bit tricky because it changes color depending on the number of edits.