Programmatically detect dark mode in SwiftUI to display appropriate Image

Question

In Assets.xcassets, there is an ability to add additional images that will automatically switch based on the Appearances. This works well for static images but I'm trying to figure out how to do this for downloaded images.

Is there a way to either set the dark mode version of an Image on init or is there a function in SwiftUI that will allow you to detect whether the current appearance is dark so that a different image URL can be served?

score 59 · Accepted Answer · answered Jul 30 '19 at 21:19

59

You can use @Environment(\.colorScheme) var colorScheme: ColorScheme in any view to get whether the device is in dark mode (.dark) or light mode (.light). Using that information, you can conditionally decide which image to show easily with a ternary operator.

For example, if you have an image named "lightImage" for light mode and "darkImage" for dark mode:

@Environment(\.colorScheme) var colorScheme: ColorScheme

var body: some View {
    Button(action: {
        foo()
    }) {
        Image(colorScheme == .light ? "lightImage" : "darkImage")
    }
}

answered Jul 30 '19 at 21:19

RPatel99

7,448
2
37
45

3

This works, but only for the colorScheme set when the app/view launches. If the user changes the color scheme during runtime, this approach will break your UI. – Alan McCosh Dec 13 '19 at 17:14
1

What is the right approach so properly handles color scheme changes during runtime? – Kevin Renskers Jan 13 '20 at 00:25
6

To answer myself: you can add `.id(self.colorScheme)` to the view. Works great. – Kevin Renskers Jan 13 '20 at 00:44
@KevinRenskers I do not know about you, but colorScheme works just fine for me even if i keep swapping between 'dark' and 'light' mode!? No need to add any additional code like you stated with `.id(self.colorScheme)`. – Learn2Code Sep 24 '20 at 14:43
This gives me the error `Cannot find type 'ColorScheme' in scope` – Ishmael7 Jan 11 '21 at 15:27
@Ishmael7 Maybe you need to `import SwiftUI` – Evan Moran Jan 13 '21 at 21:47
`Property wrappers are not yet supported on local properties` How can I get it when it is in a local property? – ScottyBlades Apr 05 '21 at 21:22

score 3 · Answer 2 · answered Jul 30 '19 at 21:14

3

There's an @Environment variable.

@Environment (\.colorScheme) var colorScheme:ColorScheme

Here's how I use it to fill an empty Rectangle:

Rectangle().fill(Color.fillColor(for: colorScheme))

answered Jul 30 '19 at 21:14

score 3 · Answer 3 · answered Jan 21 '22 at 22:36

How to detect dark mode

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

    var body: some View {
        Text(colorScheme == .dark ? "In dark mode" : "In light mode")
    }
}

Source: https://www.hackingwithswift.com/quick-start/swiftui/how-to-detect-dark-mode

score 0 · Answer 4 · answered Sep 12 '22 at 04:59

0

In XCode 13 :

@SwiftUI.Environment (\.colorScheme) var colorScheme:ColorScheme

answered Sep 12 '22 at 04:59

ThangXD Software

117
1
5

Programmatically detect dark mode in SwiftUI to display appropriate Image

4 Answers4

Linked

Related