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