New more natural colors for dark style

[westnordost]

Inspired by openstreetmap/openstreetmap-website#2332 (see https://issviewer.com/) and a little by Helium314's high contrast style for his fork.

Goals:

• Improve readability by using more different hues (i.e. not everything is blue)
• Improve compatibility with overlays since overlays color roads and thus the road color in the background map should better be near black, white or at least be monochrome
• Use more natural colors (like in light mode) to help recognizing what is what

Click the images to see them full-size.

z9

z13

z16

z19

Observations

• This natural dark style looks a little busy because the brightness for the different landuses varies more than for the light style for example. Making them all darker will make the roads less visible
• In the city dark style, the roads stood out more for being bright against a dark background
• The city dark style looks "cooler" on low zooms due to the high contrast between landmass and water, however this is not very useful

[westnordost]

Took action for some of the observations above:

• water color hue less obstrusive
• decreased contrast between "town" color and "earth" color
• made both "green" color and "wood" color darker and less contrast
• added distinct color for motorways because the other styles have this too + really helps orienting oneself on low zooms

This is how it would look like with bright roads. Looks a bit busy IMO...

[mnalis]

On first look, few comments:

• the most important are Z19, as users will probably spend most time there, so I'd optimize for that case
• in Z19 pictures, I'd actually prefer if the "useless" (non-road) elements which takes a lot of space (like landuses, buildings, rivers, parks, pitches etc.) were the ones which were the darkest, and the roads the ones which are brighter.
• however in your next comment you show you tried with brighter roads, but:
  • that is too bright IMHO
  • have you really changed just the road brightness there? It looks to me like other elements are brighter too. It could be optical illusion, though.
• in any case I'd try to make less important elements (especially the ones like to be taking bigger areas) darker even darker then in examples above. They're not that important, and if one clicks on them for quest, they'd be visibly outlined anyway.

I'd have to give it some more attention, but not tonight (probably should try it on the prone with brightness tuned down to get more realistic result).

[Helium314]

Some impressions / comparing with current dark theme, from just panning the map on my phone (during daytime, mostly high zoom)

• contrast is reduced (I needed to increase brightness to see as clearly as with current dark theme)
  • this is worse when there are (many) quests on screen, because pins and dots are much brighter than everything else
• the center lines of pedestrian roads (confusing style for highway=pedestrian #119) imo look more confusing
• in cities, the colors somewhat give the impression that the area between houses and roads is a sidewalk... not sure if this is intended, but I like it
• roads and paths stand out much less when zooming out a bit, especially for paths this starts rather early (probably due to low contrast between road outline and residential landuse)
• one way arrows stand out too much

[matkoniecz]

I always disable night mode so I am not the best person to review it, but for

This is how it would look like with bright roads. Looks a bit busy IMO...

minor business increase seems worth it to see road structure, especially in presence of quests

[westnordost]

I always disable night mode

Why though? I do the same, but maybe it is because the night mode just doesn't look good.

For me, the main dealbreaker is that (even with the background not being completely black), the quest forms and dialogs kind of melt into the background and I find this really disrupting. Plus, I like much more the light style of the map.

[westnordost]

contrast is reduced (I needed to increase brightness to see as clearly as with current dark theme)

With current dark theme, you mean your dark theme, or the blueish night theme?

[westnordost]

So from the comments, I take away that the contrast between roads and rest is too low.

This means that the roads should likely be brighter than the landuses because the other option would be to leave the roads at black and increase the brightness of everything else.
If the roads are brighter than the landuses, the landuses could (optionally) be made even more dark, also for better contrast towards the blue water.

[Helium314]

With current dark theme, you mean your dark theme, or the blueish night theme?

I mean the the blueish night theme. Haven't yet directly compared the new theme with my own.

[westnordost]

Just a short note, average brightness of
light style: 85%
(new) dark style: 29%
(old) dark style: 43%

[westnordost]

So, made everything darker except for the roads which are brighter now

[westnordost]

So what do you think?

[mnalis]

Other the suggested changing of town color to black, the map looks rather good to me (tried it on real smartphone too).

One other related issue, but I'm not sure where it is defined:

Could we make backdrop of quest icons and small quest circles (as well as background of buttons / GPS pointer) some darker color then intensive white (maybe darker grey)? It's ruining the mood here (especially if there is more then a few of them).

[mnalis]

Suggested change

	town_color: [0.087, 0.090, 0.090, 1.00]
	town_color: [0.0, 0.0, 0.0, 1.00]

I find empty space in cities to be completely black nicer and less crowded especially on high zoom levels (and it does not change display much on lower zooms):

[mnalis]

(BTW it shows more noticeable on real phone; screenshots on desktop do not do it justice).

[westnordost]

Completely black for landuses? But then, there is no diference in color between the "background" and e.g. landuse=residential.

No, I think the issue here is that the contrast between the buildings and the background is too low in the left picture. In general, I think I overdid it a bit with the decrease in brightness.

After all, even in "dark mode" on the desktop PC, you have white text on black background. Not dark grey text on black background.

And as people want to use the dark theme also in the sun (@Helium314 , ...), it would make sense if it had a little more contrast, too.

So maybe I should try out:

• lighter streets and names
• do something about the contrast between buildings and background
• slightly brighter landuses etc

[westnordost]

Hm true, it is "ruining the mood". However, changing the color of the icons is not possible / would need to be implemented (so that two different files are generated, one for dark and one for light mode).

The sprite sheet is created in TangramPinsSpriteSheet in case you want to look around. Basically to enable that there are two different files means that you have to save the version like in Prefs.PIN_SPRITES_VERSION_LIGHT and Prefs.PIN_SPRITES_VERSION_DARK or something.

Anyway, as written above... the contrast is a bit extreme. I think "the rest" and the pins should not be that far away from each other, brightness-wise. Even if the pins were a white outline on a black pin, the quest icons themselves are all rather bight.

[westnordost]

Increased brightness of road (+railway + highway) color a lot and the rest a little

[westnordost]

Comparison rev 1, rev 2, rev 3

rev 1	rev 2	rev 3

Maybe the text in rev3 should actually be black fill with white stroke (then, it could be made even a little bit brighter).
The buildings merge somewhat with the background in rev3, maybe should be more red like in rev1. For rev4 I think I should increase the brightness of the "town" color a little to be roughly the same brightness as the "green" and "wood" color. Also, the color difference between water and railway should be a little bigger I think.

[Helium314]

rev3 definitely works better inside SC than the previous one. (I created a branch with all 3 revisions selectable, plus my own ugly dark style, for more convenient in-app comparison)
I think the building outlines could be a bit brighter, this also helps against buildings merge somewhat with the background.

color difference between water and railway

Colors are similar, but I still find them easily discernable.

[mnalis]

Dunno, on first few looks, I prefer ver2 to ver3 (which seems to be getting too bright for my taste).

@Helium314 do you have .apk for that easy-comparison version for download? I've mostly tested v2 (and my modified black-v2) in evenings outside; should probably try to use dark mode in direct sunlight too (or at least cloudy-midday - as sunny does not seem to be an option for another half year).

[Helium314]

Oh, looks like I forgot the link to the branch...
https://github.com/Helium314/StreetComplete/tree/dark_compare
(apk if I used that workflow correctly)

[westnordost]

So, rev4 is pretty much the same as rev3 but:

• buildings are more red, i.e. better visible
• roads are slightly brighter (even more bright makes mid-level zoom really look ugly IMO, too high contrast)
• the text is now black with white stroke

I am going to test it in the sunlight tomorrow, because this is also one of the goals, that it is well visible in the sunlight.

[Helium314]

even more bright makes mid-level zoom really look ugly

I agree, it doesn't look too good already.

the text is now black with white stroke

I find that considerably harder to read in some cases (depends a lot on what is behind the text)

I also prefer darker colors for town and earth, they also makes buildings a bit more visible.

---

Regarding the bright UI: https://github.com/Helium314/StreetComplete/tree/dark_compare2 has dark buttons and gray dots / pins (global.pin_dot_color), though a lazy implementation with unwanted side effect of darker quest icons.
(you'll need to try for yourself, as github claims my screenshot is empty...)

[westnordost]

Hm, I took it out in the sunshine, and it is really all quite difficult to see. The roads look a bit dim but okay, all the rest is (still) barely visible. It is definitely worse than the current dark mode where both buildings and roads are ok visible even in sunlight.

At this point, I am not sure if both a quite dark background and enough contrast to see everything important well in sunlight is achievable. Does anyone actually use dark mode in the sunlight?

[Helium314]

Usability in sunlight was the reason I created my own dark style, which I find it quite usable any time (haven't used anything else in a long time).

I guess relatively bright outlines are a way of getting clearly visible buildings and roads, but that is a good step towards ugly

[mnalis]

Yeah, I also have concerns that it is possible to have a coloring theme that is at the same time:

• easy on eyes (and battery!) in the dark / low-light surroundings
• has high enough contrast in bright daylight

I would think one would need 3 themes:

• Dark mode for use in dark (low-contast, dilluted colors, no bright elements) - like rev2 above which I quite like
• Dark mode for use in bright sunlight (high-contrast outlines, but otherwise mostly black to prevent battery overuse/overheating) - perhaps something like @Helium314 high-contrast mode. Such high-contrast might also help people with degraded vision (i.e. "accessibility feature").
• Bright mode (for people who prefer look of that, and don't care about overheating / battery use). (or, if there absolutely must only be two only themes, this would be the one to cull out -- but it would be sad as it actually looks rather good, especially for new users, so I would prefer 3 themes solution)

[westnordost]

By the way, I tested the dark theme during night yesterday and I must say that even in the night, it is not well visible and also worse than the current dark mode. How could that be? I guess it is up to the fact that screen brightness automatically gets tuned down somewhat in low brightness environment. Something that doesn't really happen on desktop computers (automatically). Especially so for the newer OLED displays (which I expect most current phones now employ), which are able to achieve much more dark colors.

So, I am not sure if this PR should even be followed up further. If it shall, then I guess I would need to turn up the overall brightness up a notch somewhat further, quite probably beyond rev1. (This will make people like mnalis unhappy, but then again, people like mnalis use probably Helium314 high contrast style anyway.)

[Helium314]

Maybe users are happy with the current dark theme anyway? I don't remember any complaints except streetcomplete/StreetComplete#3378

I would need to turn up the overall brightness up a notch somewhat further, quite probably beyond rev1

The main issue I have with rev1 (and the others to some extent) is that the dark backgrounds seem needlessly bright imo.
With dark areas darker and bright things/areas/texts brighter there would be more contrast (obviously) and at the same time the white UI would stand out much less.

[westnordost]

Okay, let's stash this for now. I will not delete the branch, but close the PR.