Dark Mode for Supporters

I’ve already released this feature to Supporters, but I want to add this Ideas post to capture feedback. This is my first attempt at a dark mode implementation, so I’m sure I’ve done something wrong/unideal in all sorts of places. :sweat_smile:

This will be a Supporter feature that adheres to your system settings. If your OS is set to light, you’ll always have the light theme … If it’s set to dark, you’ll always have the dark theme … and if it’s set to Auto, it will automatically toggle back and forth with your system.

This also includes a new dark map style, which automatically toggles back and forth with everything else.

My OS is set to dark, but I would like to have my CityStride map light without changing my OS setting :grin:

Could it be possible to select this in City Stride setting ?

I feel the map is way to dark if there is light around me :grin:

17 Likes

I agree with Stéphane. I like dark mode for the website backgrounds, but not for the maps where color-coding is so important (blue areas for water, green areas for vegetation, and more). I’d like to keep the dark mode for the overall website, but have the ability to switch the map back to normal mode. Thank you!

Scott

10 Likes

I agree with both Stephane and Scott.

5 Likes

My OS setting is light and I am still getting this dark setting which I do not want at all.

Edit: It is dark mode on Firefox but lightmode on Chrome.

3 Likes

This is interesting feedback!
In my experience while building out the dark mode version, I felt that the entire effort was a complete waste without a darker map to pair with it. The brightness of the map paired terribly with the darkness of the site.
I’m left to wonder if my dark map style is just bad (honestly :sweat_smile: it probably is!) or if it does make sense to have a bright map with a dark site.

I’m going to review the map situation based on this feedback, though.

2 Likes

:thinking: I have absolutely no idea how this is possible. If anything, I see how it could go in the reverse direction.

If you go into Firefox settings and search “dark” are your browser settings configured for dark?

In the meantime, I’ll rummage around to see if I can see what’s going on…

Ah. It was set to “custom”. Thanks!

2 Likes

Phew! :sweat_smile: I was really worried about there being squirrelly bugs!
(That said, I did notice a caching issue which is affecting designs from being reloaded; that’ll be fixed soon)

In my case the dark map is not usable the way it is right now. Maybe a better one would solve the problem, but in the present situation if I want to continue to use CityStride on my phone I am forced to change my OS setting and that create “dissatisfaction” since I don’t want too. :grin:

In any case, I would recommend to never “force” something to the user and let him choose if the default option is not to is liking.

I don’t like to criticize, but this feature have a great impact on my utilization of Citystride so I want to be clear of what I think :grin: Thank you for your time developing all this and listening to our feedback :pray:

5 Likes

No combination is perfect, so I’m happy for the dark background being easier on my eyes and the light (normal) map being better for usability. It’s okay to have one be dark and one be light. :+1:

1 Like

I in fact like the darkmode as a whole website but the words then need to be white and not gray. I like the map dark as seeing where I ran but not at all for finding where to run. I cant really see the roads at all where I have not run. Like hurts my eyes. If there was a toggle on and off that would be cool.

8 Likes

I strongly agree that there should be a choice to turn this off or on. Even if I use dark mode on a browser, I’d like to keep this site in light mode since it’s what I’m used to.

For what it’s worth, I don’t think the site’s usual dark purple color is very readable against a dark background.

5 Likes

I agree! please make this a setting. i’m not able to read the current grey or purple on black. this means i have to switch the display settings on the phone just to read the site.

4 Likes

I’m a big fan of dark modes, and overall I do like the implementation here. There’s maybe a few color tweaks that could improve it (e.g. the dark purple on the profile page may be better as white).

The map style is okay. I don’t hate it but it is a big change :slight_smile: One big flaw is that it doesn’t show footpaths.

Hello,

In my case, I use dark mode in other applications and in my phone’s operating system, but I really dislike it in Citystrides and I would like to be able to choose whether it is light or dark.

I thank you for all your ideas to improve the application but I request that in this case it be selectable by the user.

Thank you.

2 Likes

I spent some time yesterday evening working on the contrast issues with the initial dark mode design. It was trash and the Firefox contrast accessibility tool helped a lot in fixing that up. I’m much happier with the current state of the pages (not discussing the map here yet), but as always - please share your feedback.

For the map, I did make some small adjustments to brighten up the streets & add pedestrian paths. I’m pretty happy with it as it is now, but I’m only 1 of ~60k so your feedback helps.
I’m going to take a little time to see if I can start with the current “light” map and darken all the existing colors down to something that can usably sit next to the dark version of the site.


Overall, I think it’s less that you all want the option to not have the CityStrides follow your system settings and more that the version that does follow your system settings should be good … and that initial version of dark mode I created was bad. So your initial feedback of “let me turn this off” is more accurately “make this design better”. :sweat_smile:
As a comparison, this forum also adheres to system settings and I haven’t received complaints about it. I think that’s because they did a good job on it.

Oh, and for further clarity - I’m not pushing back against the idea of adding a section to the Settings page that lets you choose always light / always dark / follow system. I’m also cool with changing the existing satellite toggle on the map into a layer selection interface, with options of satellite, light, and dark styles. Those things are going to take a bit more time to build out, though, so it makes sense to get the “follow system” setup nice and tidy before adding options.

4 Likes

I vote for this option.

4 Likes

I’ll be explicit here and say I do want the option to choose. I use light mode on my PC and dark mode on my phone, but I still want CS to be in light mode on my phone.

The forum absolutely allows you to choose:
image

Currently the forum opens in light mode on my phone while the rest of the site is in dark mode.

I feel like this is backwards. As it is you’re forcing a change on everyone. I would rather the option be built and the design tested more before this was even released.

Eventually :sweat_smile:

I was able to put this together, which works pretty well. It’s an exact copy of the existing map, but with all the colors darkened by 75%. It retains all the familiar aspects of the map & just tones down the brightness.

I do not understand this. I really really really want to, though. I’ll share my perspective, and you or others (don’t feel obligated to respond to this, you have absolutely no need to defend your choices) can help me better understand your reasoning:
I can’t wrap my head around the idea that you want your entire system experience to be dark, except for a few chosen places. You want that jarring feeling when you switch from anything else in your device to a bright white site? Since I can’t wrap my head around this, the only reason I can come up with is that you must dislike the dark mode design for the sites that you’re choosing to keep the light version enabled.

I fully disagree that it’s backwards - I’m finally adhering to everyone’s system settings. If anything, having the site be in light mode while your operating system is requesting dark mode is the backwards version.
I fully agree that I needed to test this more before releasing it. This is a bit of a weakness of mine - being so psyched about something & just wanting it out there … or feeling like I can’t fully test it on my own & fully shipping it instead of letting people opt into testing. I need to get better at this, and not jump out the “well it’s a solo hobby project so…” escape hatch.


Somewhat related, while working on the “dim” version & trying to improve the dark version, I came across a change to street name placement that I think will help a ton. I’ve pushed the street names off the street by 0.5 em, which will probably help us out while route building … I know I regularly had routes/LifeMap/activities cover street names in an annoying way. Here’s the diff:

7 Likes