SwiftUI Color Scheme
Tags: swift, swiftui
Published: 2020-07-23 05:50:26

---
title: SwiftUI Color Scheme
published: true
date: 2020-07-22 00:00:00 UTC
tags: swift, swiftui
canonical_url: https://blog.rizwan.dev/blog/swiftui-color-scheme
---

In UIKit app, If you would like to change the color scheme within the app. Setting `UserInterfaceStyle` object to your root window would help.

Take a look at [NetNewsWire](https://github.com/Ranchero-Software/NetNewsWire) iOS app. It gives Appearance settings where you can choose your color palette for the app. These are the possible options

- Automatic: respects system color scheme and changes whenever user switching between light and dark mode from the OS
- Light: Light mode for the whole app and didn’t respect the system color scheme
- Dark: dark mode for the whole app and didn’t respect the system color scheme

```swift
func updateUserInterfaceStyle() {
  switch AppDefaults.userInterfaceColorPalette {
    case .automatic:
      window!.overrideUserInterfaceStyle = .unspecified
    case .light:
      window!.overrideUserInterfaceStyle = .light
    case .dark:
      window!.overrideUserInterfaceStyle = .dark
  }
}
```

Setting `unspecified` makes the app respects the system-wide color scheme here.

## SwiftUI Way

SwiftUI gives us an environment variable and preferred color scheme modifier to change the color scheme.

```swift
struct ContentView: View {
    @State var preferredColorScheme: ColorScheme? = nil

    var body: some View {
        List {
		        Button(action: {
                preferredColorScheme = .light
            }) {
                HStack {
                    Text("Light")
                    Spacer()
                    if preferredColorScheme == .light {
                        selectedImage
                    }
                }
            }

            Button(action: {
                preferredColorScheme = .dark
            }) {
                HStack {
                    Text("Dark")
                    Spacer()
                    if preferredColorScheme == .dark {
                        selectedImage
                    }
                }
            }
        }
        .listStyle(InsetGroupedListStyle())
        .preferredColorScheme(preferredColorScheme)
        .navigationBarTitle("ColorScheme Test")
    }

    var selectedImage: some View {
        Image(systemName: "checkmark")
            .foregroundColor(.blue)
    }
}
```

In the above code, we are setting the `preferredColorScheme` modifier to our content view and changing it via `@State` object. It will give us one view with two options where you can change the color scheme.

It’s also possible with the environment value like below

```swift
@main
struct ColorSchemeTestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environment(\.colorScheme, .dark)
        }
    }
}
```

We can also get to know the currently selected color scheme via environment object like below.

```swift
@Environment(\.colorScheme) var colorScheme
```

**NOTE**

As of beta 2, there is no way that I can find, to set the `colorScheme` to `unspecified` to get automatic behaviour. I have even filed a Feedback. In case if you find a way to achieve it, let me know at [twitter](https://www.twitter.com/rizzu26)

I did create a sample project to explain the behaviour and you can find it [here](https://github.com/rizwankce/SwiftUIColorSchemeTest) at Github.

## Links

- [Color Scheme](https://developer.apple.com/documentation/swiftui/environmentvalues/colorscheme) Apple documentation
- [Preferred Color Scheme](https://developer.apple.com/documentation/swiftui/disclosuregroup/preferredcolorscheme(_:)) modifier Apple documenation
- [NetNewsWire](https://github.com/Ranchero-Software/NetNewsWire) project on Github