Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ID Dark Mode #8214

Open
CharliePlett opened this issue Nov 21, 2020 · 5 comments
Open

ID Dark Mode #8214

CharliePlett opened this issue Nov 21, 2020 · 5 comments
Labels
accessibility Relates to personal ability or assistive tools

Comments

@CharliePlett
Copy link

Hey, could we please have a dark mode?

@quincylvania
Copy link
Collaborator

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.

@quincylvania quincylvania added the accessibility Relates to personal ability or assistive tools label Nov 23, 2020
@mxdanger
Copy link

mxdanger commented Dec 18, 2020

@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
Copy link
Collaborator

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
Copy link
Collaborator

1ec5 commented Sep 27, 2022

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Relates to personal ability or assistive tools
Projects
None yet
Development

No branches or pull requests

5 participants