Dark Mode bugs/improvements for the UI

[gravitystorm]

I want to have an issue here for people to report bugs with the dark mode as it affects the user interface.

For this issue, any discussion of toggles, user preferences, or the maps are off-topic.

For example, here's one thing I've spotted and we can discuss - the buttons for third-party sign-ins look a bit off, since they maintain the same light grey background as light mode:

If you spot other things like this with the dark mode, please comment below (or even better, make a PR!)

[deevroman]

Map previews don't have a dark background in the layers menu.

dark_bug.mp4

[deevroman]

https://www.openstreetmap.org/traces

You might want to change the text color on a bright green background. For the example I changed the color to black and it seems to read better

[Nekzuris]

Readability is bad due to poor contrast with blue.

[Dimitar5555]

The numbers on profile pages are hard to read.

---

The popovers (or whatever these balloons are called) should have dark background, right?

---

Some items in the map legend are hard or almost impossible to see, others have distorted colours (major roads for example). The screenshot is from zoom level 17.

---

The buttons on each message in the inbox and outbox should probably use outline buttons.

[Nekzuris]

Contrast is a bit too low in the topbar, even in light mode. Chrome shows green at 4.5 but I think it should be even higher since this text is important.

[Nekzuris]

Imo the background around the search box is unnecessary:


maybe replace it by a shadow

[hlfan]

@AntonKhorev I don't think linking that PR / closing this issue was the best idea.

[AntonKhorev]

Don't write that your pull request "fixes" this issue, Github closes it automatically on merge if it sees "fixes".

[ChrisJoubert2501]

As mentioned by @Nekzuris in on this PR, the dark mode brightness filter

@include color-mode(dark) {
  .leaflet-tile-container .leaflet-tile,
  .mapkey-table-entry td:first-child > * {
    filter: brightness(.8);
  }

applied to the .leaflet-tile seems to make the UI quite laggy in Firefox (didn't test in other browsers).

With brightness filter:

output2.mp4

Without brightness filter:

output1.mp4

[HolgerJeromin]

The osm element highlight color is quite saturated. This depends on the monitor setting and for sure the color of the rendered map.

IMO we should adjust the color a bit in dark mode.

[Nekzuris]

@ChrisJoubert2501 I managed to fix my performance issue by disabling and re-enabling style customization with userChrome.css in about:config toolkit.legacyUserProfileCustomizations.stylesheets, restarting Firefox after each setting change.

However, other users with less powerful machines and no hardware acceleration are still experiencing performance reductions.

Also note that screen recordings like this are less impressive because you don't feel the input lag.

[Swarkin]

For the future, can we get a map dark mode similar to how the Dark Reader extension does it?

Image

[Nekzuris]

The control buttons don't change in dark mode, I think that's good, but the tooltip shouldn't change then.
current dark mode vs light mode

And I don't think the lighter background behind the 𝐢 looks good.

[hlfan]

And I don't think the lighter background behind the 𝐢 looks good.

How would you like to have the button indicate that it's disabled then?

[Nekzuris]

How would you like to have the button indicate that it's disabled then?

I think the tooltip is enough, but yeah I see your point.

[deevroman]

Although iD doesn't have a dark theme, it seems that you can reduce the annoyance of blinding when loading it by setting at least some dark or transparent background for the iframe.

iframe_flash.mp4

[mp747474]

Changesets look really funny in dark mode. Here you can see that the post box symbol is barely visible against the dark background due to the low contrast, while the generic node symbol is almost flashy due to how bright it is:

[AntonKhorev]

Here you can see that the post box symbol is barely visible

The way icons are displayed was changed recently, try refreshing the page. This is how the post box icon should look like: