Swift Automatically Switch App’s Theme At Sunset

Question

There are several apps on the App Store that have the option in the app to automatically switch to dark mode. I’m assuming there is an easy way to implement this, but I can’t seem to find anything about it when looking online. I just want to be able to have the user select an option that will automatically switch to a dark theme if it is after sunset but have the light theme during the day. Anyone know how to do this in swift?

Answer 1

If you want to make your own, custom dark mode you can use traitCollectionDidChange to detect when iOS goes in and out of dark mode and then perform your customisation. This is only for iOS 13 and above.

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection) //always call this first
}

Answer 2

The most reliable – and by far the easiest – way to implement this is to plug into the system's dark mode setting, rather than rolling your own time-based system. This will also allow your users to make their own decision – if they want light mode all the time, or want to temporarily switch to dark mode in the middle of the day, your app will automatically work for them. And they'll thank you for it.

There are various ways you can manage this:

1. Use Color's built-in definitions, such as .primary and .secondary, and when they don't satisfy, consider using init(UIColor) to convert some of UIKit's larger list of UI Element colors to work with SwiftUI.

2. If you define your own colors in your Asset catalog and use them via the Color("My Color Name") syntax, you can elect to set a dark mode variant to use (by changing the Appearance setting from None to Any, Dark).

   When the iOS system changes from light to dark and back, your color variants will get selected automatically. These might be a slight variation – e.g., a different shade of purple that looks better when working with dark colors – or it could be something that inverts completely (light gray to dark gray, for example).

3. If you need to make any more drastic changes – like changing line weights in dark mode – your views can find out whether dark mode is enabled by using the colorScheme environment variable:

   struct MyView: View {
     @Environment(\.colorScheme) private var colorScheme
     // ...
   }
   

   colorScheme will be either .dark or .light depending on the phone settings.

However, if you are insistent that you want to have control over light and dark mode instead of letting the system take on that responsibility, you can use the same environment value from step 3 and override it. For example:

struct ContentView {
  var body: some View {
    MyView()
      .environment(\.colorScheme, .dark)
  }
}

In that example MyView, and its children, will then behave as if dark mode is always on and everything else – auto-selection of colors from the asset catalog, etc. – will work.

So if you wanted to, you could come up with your own time-based approach to determine whether to set the colorScheme environment to .light or .dark.

However, I'd recommend again to let the system handle everything unless you have a very good reason not to.