Dark Mode for Supporters

I think it’s because most of us are using CS on our phones in brighter areas outdoors. When the map is in dark mode under bright sunlight, it makes it harder to examine—especially with the purple lines that don’t contrast as well with the dark background.

lol I just realized how I’ve hijacked my own thread here in discussing the deeper details into people’s use of dark mode :sweat_smile:
I’ve pulled out that conversation into a chat in the Water Station, if anyone cares to “show me the light” on dark mode :rofl: Message #8754 by JamesChevalier – #Water Station

Then we can keep this thread just on the topic of me fixing all this :grimacing:

I think you’re exactly right that the reactions so far are in relation to design as opposed to the idea of dark mode. To add one more voice (of ~60k), I LOVE that you’re adding dark mode functionality.

Early feedback on pages that you just released are that they look GREAT. The dark black background + purple / blue contrasts really well.

I agree with previous comments that the map as-is isn’t working. I’ve been trying to figure out what, specifically, to try to provide actionable feedback instead of just saying it looks like a negative of a photo.

My best guess is that it’s a contrast issue. I did a bit of digging, and found these helpful links:

  1. Relative luminence: link
  2. Definitions: link
  3. Calculations: link

Using the above, and screenshots / eyedroppers of the light mode / dark mode instances of CS, I calculated the relative contrast between different map elements (see below). I think the most important contrasts are between:

  • Run routes / streets
  • Run routes / background

Two potential suggestions that you’re welcome to ignore/consider as you see fit:

  1. Consider lightening the background of the map to be closer to the original light gray, instead of a darker black (I recognize this kind of defeats the purpose of dark mode, however)
  2. Choosing a higher contrast colour for run routes to improve the difference

Thanks for adding this functionality & for having the conversations here on improvements!

ah, that’s fine that dark mode is invoked at night, a blessing for the eyes; but … the contast is to low.

i would recommend the following:

  1. make a toggle switch to simple swith to light mode if becessary
  2. can you use grey in stead of black in dark mode?

This would line up with a number of changes I had to make from the Firefox contrast accessibility tool’s suggestions. I use blue-500 a lot throughout the site (from Tailwind) and many of these needed to be updated to blue-400 for the dark version in order to get the ratio right.

Update: I released an update that addresses this, and also changes the dark mode map to the “dim” version (screenshot above) and replaces the satellite toggle with a menu that lets you choose between dark/dim/light/regular/satellite

That’s super slick to have the optionality.
Initial tests are that it works, but the menu is not rendering appropriately within the screen at the moment:

Note that it is half hidden near top of screen.
Thanks for implementing this so quickly!

1 Like

Yeah, I just realized I forgot to include the LifeMap page adjustments :person_facepalming: I’m working on those now. It’ll behave properly on every other page, though.

1 Like

Yep, it’s doing that for me as well—on desktop and mobile. But it still works!

I’d say the dark mode is a reasonable idea, but I just wish I had an explicit way to turn it off within CityStrides itself without having to modify my system settings.

I do like that there are now different versions of the map to be able to cycle through but I really enjoyed that turning on the satellite map was just one click away. Now that swap is particularly cumbersome. I’d advocate for having the satellite toggle remain as it was and put the new map versions into the menu. It seems like the map type toggles is something that would happen much less frequently once someone finds the one they like the best, versus the satellite toggle which can get daily use when doing route scouting.


+1 for this. More clicks/taps needed on the Map page is not ideal for my usage.

While I’m working on the settings changes that allow light/dark/system, I’m approaching this sentiment as if the underlying request is to improve the dark mode version as opposed to the removal of it.
Can you share some details around the current dark mode version that make you wish you could turn it off? Being as specific as possible is going to be the most useful.

My perspective here is that if you have dark mode enabled in your system, then you’re telling your entire system that you want a dark UI mode displayed wherever possible. The fact that you’re asking to disable it suggests to me that there’s something wrong with this implementation. If [list of problems] didn’t exist, then you wouldn’t be asking to disable it.

I’d need to move the style picker :sweat: since there’s so little vertical room for these buttons. I can look into options…

FYI Train station name not appearing with the correct contrast in Dark Mode.

Thanks! I just updated that in both dark & dim styles - not sure how long Mapbox caches its styles, though.

Figured out a bit of a proof-of-concept custom icon area along the top, so there’s at least some hope of being able to move the layer select button into that area & re-adding the satellite switch button…

Could you not just do something like this? Please enjoy my paint skills:


Then the style switcher would still pop up the same menu to only switch the map style and the satellite toggle is completely separate. There are 6 buttons on the left menu so it seems like this should be fine.

Another feedback/usage issue: Was out running this evening and using my phone to look at my Route. In a new area with a complex itinerary that criss-crossed itself. For the life of me, squinting down at my screenI could not tell what direction the rockets were pointing and I ended up going the wrong way.

To make the dark mode rockets work, they should either have a higher contrast outline than dark grey-on-black (in daytime the white-on-dark blue works fine) to better define their direction…or switch to arrows which would be simpler and cleaner. [Disclosure: I am and have been an arrows > rockets guy]

So I’ve been using and thinking about the implementation of Dark Mode and I’m more and more deciding I don’t like it on mobile. I use CS on my phone during activities and I use CS on my laptop preparing and reviewing activities.

During a run, especially at night, I don’t mind and even like that my screen is bright and I can easily see the information, especially if I’m about to make a turn and whipping my phone out real fast to crossreference something ambiguous on my smaller watch display.

Meanwhile on browser I like CS Dark Mode it because it does more smoothly blend with my OS/Chrome Dark Mode settings at home at my desk where it’s easier on the eyes. I guess that’d be the same if I was checking CS on my phone at home, although I don’t.

Can see how this makes CS unique among other sites/apps that one might use at night? Just my two cents so far in the implementation.


Yes same here. Dark mode works for everything else on my phone but CityStrides not so much

1 Like

Some specifics about the dark mode. The header bar is a different color black than the sidebar and it makes it feel like something is broken when scrolling.

Also, minor thing, but on the profile page where it has the logos of the connected services, the Garmin logo is mostly black so it gets completely erased when in dark mode. All you can see is the little blue triangle, also makes it feel like something is broken.

Nearly superb. Dark mode is very nice and to be able to toggle is great.
The point is that before I am going to run I(we) study the street patron and the the streets have to be in great contrast (regular).

I have one thing I donot like and that is the offset of the names you just programmed, the names half in and half out of the streets.
For the regular, light map it is not necessary at all, maybe some people would like it for the dark map but I would prefer the names exactly on the roads.
Is also more esthetical :slight_smile:

It took some getting used to, but I love it now. Would it be possible to add a ‘No map’ option to the list of modes?