Switch between light/dark UI colors and day/night map style depending on time of day

[1ec5]

The map view should automatically switch between the Mapbox Navigation Day and Mapbox Navigation Night map styles (or corresponding styles specified by the developer) based on the time of day and also when entering or exiting a tunnel. Foreground and background colors throughout the built-in UI components should also change to match the map style.

Rationale

The Navigation Day and Navigation Night styles were designed to be legible in different lighting conditions. We should not blind the user with a day style at night or force them to squint at a night style during the day. In addition to facilitating day/night switching, this feature enables developers to thoroughly customize the look and feel of disparate UI components without writing too much code.

The iOS navigation SDK calls this customization system “styles”, though we sometimes refer to it as “UI styles” or “themes” or “skins” to differentiate it from the more basic style switching functionality exposed by the map SDK. We should have an analogous system in place on Android, even if the specifics will differ according to platform conventions.

Design notes

The application should be able to configure the navigation SDK to call the appropriate map style switching code in the map SDK. It should not be up to the application to switch the map style directly. If possible, prefer a declarative approach to specifying the colors over an imperative approach.

/ref #1057 #3423 /cc @mapbox/navigation-android

[1ec5]

There are some examples of what the iOS navigation SDK looks like by day and by night in mapbox/mapbox-navigation-ios#2291. The most glaring difference is that the top and bottom banners’ backgrounds are white during the day and only midnight blue at night. That distinction allows the iOS navigation SDK to look like a plain-vanilla UI on iOS, but it may be contrary to design expectations on Android. The important thing is that there is the capability to vary the colors of more than just the map.

[cafesilencio]

Is there a developer override or does the SDK do this switching whether the developer wants it or not? How does this work with custom styles, for example if a developer creates only one custom map style, how does the SDK switch to the "dark" version?

[cafesilencio]

It should not be up to the application to switch the map style directly.

I disagree. The SDK shouldn't impose such conditions onto a developer IMO. They have their own branding and app. requirements which we cannot possibly predict.

[abhishek1508]

I agree with the idea of changing the style between day/night based on the time. We could also look into LUX value coming out of the device sensors and hook the style changing to it.

Is there a developer override or does the SDK do this switching whether the developer wants it or not?

I definitely think this kind of override should be there

for example if a developer creates only one custom map style, how does the SDK switch to the "dark" version

The SDK continues to show day style in dark mode.

I disagree. The SDK shouldn't impose such conditions onto a developer IMO.

I agree with @cafesilencio. We shouldn't impose such kind of restrictions. But both the behaviors should not co-exist as it would increasingly complicate the logic and doesn't make sense. If a developer wants to decide when to change the styles they should first disable auto switching.

[1ec5]

Is there a developer override or does the SDK do this switching whether the developer wants it or not? How does this work with custom styles, for example if a developer creates only one custom map style, how does the SDK switch to the "dark" version?

The default is to switch between Mapbox Navigation Day and Mapbox Navigation Night automatically, but the developer can always customize these two slots or define only a single style, which disables the day/night switching functionality.

It should not be up to the application to switch the map style directly.

I disagree. The SDK shouldn't impose such conditions onto a developer IMO. They have their own branding and app. requirements which we cannot possibly predict.

I should’ve worded this differently: it should always be possible for the application to change the map style, but something in the navigation SDK should manage the lifecycle of the style, since the map SDK doesn’t have context about the day/night switching. It also isn’t purely about day and night: a night style is automatically applied when entering a tunnel, something the map SDK couldn’t possibly know on its own.

On iOS, StyleManager is a reusable component that the developer can attach to any NavigationMapView. The one built into the drop-in UI has one already provided. If you provide only one UI style to StyleManager, it does nothing. I want to also emphasize that the UI styles themselves can be customized. We encourage any developer who wants a custom look and feel to define a custom UI style that specifies UI colors that match a custom map style.

We could also look into LUX value coming out of the device sensors and hook the style changing to it.

That would be cool. We investigated using the ambient light level in mapbox/mapbox-navigation-ios#423 https://github.com/mapbox/mapbox-navigation-ios/pull/519#issuecomment-324095984, but it turned out to be a private API inaccessible to the SDK. We also looked at the screen brightness, but people adjust their screen brightness for a variety of reasons, including to conserve battery. I’m glad to hear the device light sensor is actually accessible on Android. It might be challenging to come up with the right light threshold, accounting for the various places people put their phone while navigating (dashboard versus center cupholder), but maybe that’s something we can experiment with.

We also have an outstanding request to switch to a night style if the user has Dark Mode enabled across their entire system: mapbox/mapbox-navigation-ios#539 mapbox/mapbox-navigation-ios#2223. If there’s a good analogue to that on Android, that might be worth considering too. Maybe automatic day/night/tunnel switching should be disabled in Dark Mode. 🖤

[artemsorochan]

Hi, was this feature implemented?