Map Style Following Theme

_{Last updated: April 24, 2026 | 2 minutes read}

UIKit

This example demonstrates how to use GEMKit in a UIKit application to apply a map style that follows the device theme (light/dark mode).

Check the full implementation on GitHub.

Map Light Theme

Map Dark Theme

Applying the Style on Load and Theme Change

applyStyleForCurrentTheme() reads traitCollection.userInterfaceStyle to choose between MapStyleIdentifiers.day and .night, then applies it via applyStyle(withStyleIdentifier:smoothTransition:). It is called once in viewDidLoad and again in traitCollectionDidChange(_:) whenever the system appearance changes:

ViewController.swiftView on GitHub

    override func viewDidLoad() {

        super.viewDidLoad()

        // ...

        self.applyStyleForCurrentTheme()
    }

    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {

        super.traitCollectionDidChange(previousTraitCollection)

        if previousTraitCollection?.userInterfaceStyle != traitCollection.userInterfaceStyle {

            self.applyStyleForCurrentTheme()
        }
    }

    // MARK: - Style

    func applyStyleForCurrentTheme() {

        let styleIdentifier: Int

        if traitCollection.userInterfaceStyle == .dark {
            styleIdentifier = MapStyleIdentifiers.night.rawValue
        } else {
            styleIdentifier = MapStyleIdentifiers.day.rawValue
        }

        self.mapViewController?.applyStyle(withStyleIdentifier: styleIdentifier, smoothTransition: false)
    }

SwiftUI

This example demonstrates how to use GEMKit in a SwiftUI application to apply a map style that follows the device theme (light/dark mode).

Check the full implementation on GitHub.

Map Light Theme

Map Dark Theme

Map Display and Style Following OS Theme

@Environment(\.colorScheme) observes the current system appearance. The .mapStyle() modifier is called with the result of getStyleFollowingOS(), which returns MapStyleIdentifiers.night in dark mode and .day in light mode. SwiftUI automatically re-evaluates the view whenever colorScheme changes, so the map style updates in real time:

ContentView.swiftView on GitHub

struct ContentView: View {
    
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        MapReader { proxy in
            MapBase()
                .mapStyle(getStyleFollowingOS())
                .ignoresSafeArea()
        }
    }

    func getStyleFollowingOS() -> Int {
        return colorScheme == .dark ? MapStyleIdentifiers.night.rawValue : MapStyleIdentifiers.day.rawValue
    }
}