Change background color when dark mode turns on in SwiftUI

Question

I've created a custom sheet in SwiftUI with the background color White .background(Color.white)

Now I want the background color to change to black when the user turns on the dark mode on iOS. But I can't find a dynamic color for background like Color.primary for colors of the text etc.

So is there any way to change the background color to black when dark mode turns on?

score 108 · Accepted Answer · answered Feb 06 '20 at 16:47

To elaborate on the two existing answers, there are a couple of approaches to making the background change based on light or dark mode (aka colorScheme) depending on what you're trying to achieve.

If you set the background color to white because that's the default background color, and you want the system to be able to update it when the user switches to dark mode, change .background(Color.white) to .background(Color(UIColor.systemBackground)) (umayanga's answer).

e.g.

// Use default background color based on light/dark mode

struct ContentView: View {
...
var body: some View {

    // ... to any view
    .background(Color(UIColor.systemBackground))

}

If you want to customize the color of a view based on the device being in light or dark mode, you can do this (from Asperi's answer):

// Use custom background color based on light/dark mode

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

...
var body: some View {

    // ... to any view
    .background(colorScheme == .dark ? Color.black : Color.white)

}

Note that many SwiftUI views set their background color to .systemBackground by default, so if you're using a ScrollView, List, Form, etc, they'll use the default system background color and you won't need to use .background unless you want to customize it.

.systemBackground for light mode is white but it is greyish on dark mode. But the default background for dark mode is pure black for iOS 14 widgets. — Myat Min Soe, Sep 26 '20 at 20:46
@myatmins systemBackground for dark mode is pure black. But it’s gyeyish (systemGray6) if the view is on a sheet — umayanga, Nov 08 '20 at 06:40

TheNeil · Answer 2 · 2020-06-05T02:56:01.277

If you want something that works directly from Color (like you're doing with Color.primary), and functions on both iOS and macOS (UIColor won't work on macOS), you can use the following simple Color extension, which uses conditional compilation to work correctly on either OS.

You then simply access these from elsewhere in your code like any other SwiftUI Color. For example:

let backgroundColor = Color.background

No need to check colorScheme or userInterfaceStyle with this approach: The OS will switch automatically when the user moves between Light & Dark mode.

I've also included 'secondary' & 'tertiary' colors, which are a little subjective on macOS, but you can always change them to some of the other NSColor properties if you want.

Swift v5.2:

import SwiftUI

public extension Color {

    #if os(macOS)
    static let background = Color(NSColor.windowBackgroundColor)
    static let secondaryBackground = Color(NSColor.underPageBackgroundColor)
    static let tertiaryBackground = Color(NSColor.controlBackgroundColor)
    #else
    static let background = Color(UIColor.systemBackground)
    static let secondaryBackground = Color(UIColor.secondarySystemBackground)
    static let tertiaryBackground = Color(UIColor.tertiarySystemBackground)
    #endif
}

score 15 · Answer 3 · answered Jan 11 '20 at 13:06

15

Change the .background(Color.white) to .background(Color(UIColor.systemBackground))

answered Jan 11 '20 at 13:06

umayanga

2,254
3
15
26

score 13 · Answer 4 · answered Oct 26 '20 at 02:50

We can also change the color automatically by adding them to the Assets folder.

Add a new color set in the Assets folder
After you add a color set, you can name it as per your convenience and you can configure your color for Any Appearance, Dark Appearance, Light Appearance.
To access your newly added color set, you need to follow the following initializer syntax of Color
```
Color("your_color_set_name")
```
For best practice you would not want your code filled with string values of your Color set name. You can create an extension to make usage more pragmatic and ordered.
```
extension Color {
        static var tableViewBackground: Color {
            Color("tableViewBackground")
        }
    }
```

score 11 · Answer 5 · edited Aug 23 '22 at 08:46

11

Here is possible approach (for any color)

    struct ContentView: View {
        @Environment(\.colorScheme) var colorScheme
    
        ...
        var body: some View {
    
            // ... to any view
            .background(colorScheme == .dark ? Color.black : Color.white)
    
        }
   }

edited Aug 23 '22 at 08:46

Martijn Pieters

1,048,767
296
4,058
3,343

answered Jan 11 '20 at 13:15

Asperi

228,894
20
464
690

score 8 · Answer 6 · answered Jul 29 '20 at 01:52

If you wish to use custom background colour for light/dark mode then I would recommend creating New Colour set in your Assets folder with custom colour values for different Appearances.

That way background colour will change automatically when display mode is switched without the need of adding a single line of code.

And then using this color of the colour list for Controller View background.

score 8 · Answer 7 · answered Dec 08 '20 at 14:07

8

Personally I don't like to create a color set in the Assets folder.

I prefer it to be in the code so the best practices for this are as follows:

extension Color {

    static var primaryColor: Color {
        Color(UIColor { $0.userInterfaceStyle == .dark ? UIColor(red: 255, green: 255, blue: 255, alpha: 1) : UIColor(red: 200, green: 200, blue: 200, alpha: 1) })
    }

}

Using:

.background(Color.primaryColor)

answered Dec 08 '20 at 14:07

Mickael Belhassen

2,970
1
25
46

do you have the same solution for macOS? – Andrew_STOP_RU_WAR_IN_UA Jun 20 '21 at 13:01
1

Use NSColor instead of UIColor – Mickael Belhassen Jun 20 '21 at 13:11
Did you tried it with NSColor? I have already tried and its failed. https://prnt.sc/162l01n . As I see there is no similar initialiser for NSColor – Andrew_STOP_RU_WAR_IN_UA Jun 20 '21 at 13:16
For those who tried this and it failed, try using r g b a values in the range of 0 to 1.0, not 0 to 255. – Jared Updike Jun 30 '22 at 23:02

Luc-Olivier · Answer 8 · 2022-05-21T22:08:02.427

Edit #2

Here are 2 completes solutions:

Giving a control of mode status (Light or Dark) at Application Level
Giving a control of mode status at View Level

Both are updated on the fly when Mode status changes.

Both work in Preview and on true device.

Both manage a Color Theme based on Mode status (inspired from JetPack Compose).

In solution 1, OSModeTheme & OSModeThemeUpdater work together to provide the right mode status and color theme as static values, offering the possibility to define colors at the top level, eg: in default values of a view init parameters.

init(color: Color = OSModeTheme.colors.primary) { ... }

In solution 2, OSModeThemeProvider is a View Wrapper providing a local variable containing the right ColorTheme according to the Mode status.

OSModeThemeProvider { colors in 
    Text("Foo bar")
        .foregroundColor(colors.primary)
}

// Commun part

protocol Palette {
    static var primary: Color { get }
    static var primaryVariant: Color { get }
    static var secondary: Color { get }
    static var secondaryVariant: Color { get }
    static var accentColor: Color { get }
    static var background: Color { get }
    static var frame: Color { get }
    static var error: Color { get }
}
struct LightColorPalette: Palette {
    static var primary = ColorPalette.black
    static var primaryVariant = ColorPalette.grayDark
    static var secondary = ColorPalette.grayMid
    static var secondaryVariant = ColorPalette.grayLight
    static var accentColor = ColorPalette.blue
    static var background = ColorPalette.white
    static var frame = ColorPalette.grayDark
    static var error = ColorPalette.orange
}
struct DarkColorPalette: Palette {
    static var primary = ColorPalette.white
    static var primaryVariant = ColorPalette.grayLight
    static var secondary = ColorPalette.grayLight
    static var secondaryVariant = ColorPalette.grayMid
    static var accentColor = ColorPalette.blue
    static var background = ColorPalette.black
    static var frame = ColorPalette.grayLight
    static var error = ColorPalette.orange
}

// Solution 1

class OSModeTheme {
    static var colorScheme: ColorScheme = .light
    static var colors: Palette.Type = LightColorPalette.self
    static func update(mode: ColorScheme) {
        colorScheme = mode
        colors = colorScheme == .dark ? DarkColorPalette.self : LightColorPalette.self
    }
}

struct OSModeThemeUpdater<Content>: View where Content: View {
    @Environment(\.colorScheme) var colorScheme
    let content: () -> Content
    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }
    var body: some View {
        OSModeTheme.update(mode: colorScheme)
        return content()
    }
}


struct OSModeThemeDemo: View {
    var body: some View {
        OSModeThemeUpdater {
            ZStack {
                Rectangle()
                    .fill(OSModeTheme.colors.background)
                VStack {
                    Group {
                    Text("primary")
                        .foregroundColor(OSModeTheme.colors.primary)
                    Text("primaryVariant")
                        .foregroundColor(OSModeTheme.colors.primaryVariant)
                    Text("Secondary")
                        .foregroundColor(OSModeTheme.colors.secondary)
                    Text("secondaryVariant")
                        .foregroundColor(OSModeTheme.colors.secondaryVariant)
                    Text("accentColor")
                        .foregroundColor(OSModeTheme.colors.accentColor)
                    Text("background")
                        .foregroundColor(OSModeTheme.colors.background)
                    Text("frame")
                        .foregroundColor(OSModeTheme.colors.frame)
                    Text("error")
                        .foregroundColor(OSModeTheme.colors.error)
                    }
                }
            }
        }
    }
}

// Solution 2

struct OSModeThemeProvider<Content>: View where Content: View {
    @Environment(\.colorScheme) var colorScheme
    let content: (Palette.Type) -> Content
    init(@ViewBuilder content: @escaping (Palette.Type) -> Content) {
        self.content = content
    }
    var body: some View {
        content(colorScheme == .dark ? DarkColorPalette.self : LightColorPalette.self)
    }
}

struct OSModeThemeProviderDemo: View {
    var body: some View {
        OSModeThemeProvider { palette in
            ZStack {
                Rectangle()
                    .fill(palette.background)
                VStack {
                    Text("primary")
                        .foregroundColor(palette.primary)
                    Text("primaryVariant")
                        .foregroundColor(palette.primaryVariant)
                    Text("Secondary")
                        .foregroundColor(palette.secondary)
                    Text("secondaryVariant")
                        .foregroundColor(palette.secondaryVariant)
                    Text("accentColor")
                        .foregroundColor(palette.accentColor)
                    Text("background")
                        .foregroundColor(palette.background)
                    Text("frame")
                        .foregroundColor(palette.frame)
                    Text("error")
                        .foregroundColor(palette.error)
                }
            }
        }
    }
}

Android developers upvote this :) – brucemax May 13 '22 at 22:53 — brucemax, May 13 '22 at 22:53

score 1 · Answer 9 · answered May 01 '20 at 06:05

You can extend UIColor as shown below

extension UIColor{
    struct Custom {
        static var black: UIColor{
            if #available(iOS 13, *) {
                return UIColor.init { (trait) -> UIColor in
                    return trait.userInterfaceStyle == .dark ? UIColor.white : UIColor.black
                }
            }
            return UIColor.black
        }
    }
}

Then use as .background(Color(UIColor.Custom.black))

Your view will update the color when dark move is enabled/disabled

Do you have a link to documentation for that initializer of UIColor. This doesn't work for me. — Martin, Jan 07 '23 at 03:34

Nelu · Answer 10 · 2021-04-20T13:46:32.050

1

Check out this page for recommended system colors for various UI elements. Using these should take care of dark/light mode switching.

UI Element Colors

edited Apr 20 '21 at 13:46

answered Apr 20 '21 at 12:43

Nelu

16,644
10
80
88

score 1 · Answer 11 · answered Mar 27 '23 at 18:45

The colorset answer is best choice for global colors in your app, but if you want to quickly set a color in code and not touch your xcassets file this is the best way:

create a color extension:

extension Color {
    func darkMode(_ darkColor: Color, _ colorScheme: ColorScheme) -> Color {
        return colorScheme == .dark ? darkColor : self
    }
}

then use it in your view. You will have to pass in a colorScheme. I wish is could set this in the extension but unfortunatly this has to be set in the view and passed in.

struct SampleColor: View {
    @Environment(\.colorScheme) var colorScheme
    
    var body: some View {
        Text("Hello, World!!")
            .padding()
            .background(Color.green.darkMode(Color(red: 0, green: 29, blue: 33), colorScheme))
            .cornerRadius(10)
            .foregroundColor(.white.darkMode(.black, colorScheme))
    }
}

Then preview your view

struct SampleColor_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            SampleColor()
                .previewDisplayName("Light Mode")
            SampleColor()
                .previewDisplayName("Dark Mode")
                .preferredColorScheme(.dark)
        }
    }
}

btw you shouldn't have to do this for some built in colors. For example for your text Color(.label) already toggles based on theme. — Richard Torcato, Mar 27 '23 at 18:53

SirEnder · Answer 12 · 2022-07-12T13:17:46.380

Here is my solution. Inspired by Luc-Oliver's solution 2.

extension ColorScheme {

    typealias ColorSelector = (Color, Color) -> Color

    private var colorSelector: ColorSelector { color(_:_:) }

    func color(_ light: Color, _ dark: Color) -> Color {
        switch self {
        case .light: return light
        case .dark: return dark
        @unknown default: fatalError()
        }
    }

    struct Provider<Content>: View where Content: View
    {
        typealias ColorSelector = ColorScheme.ColorSelector
        typealias ContentGetter = (ColorSelector) -> Content
        
        @Environment(\.colorScheme) var colorScheme
        let content: ContentGetter
        
        init(@ViewBuilder content: @escaping ContentGetter) {
            self.content = content
        }
        
        var body: some View {
            content(colorScheme.colorSelector)
        }
    }
}

Use like:

struct DemoView: View {
    var body: some View {
        ColorScheme.Provider { color in
            HStack {
                Rectangle().fill(color(.blue, .red))
                Rectangle().fill(color(.green, .orange))
            }
        }
    }
}

score 0 · Answer 13 · answered Aug 18 '22 at 02:59

I built a bridge between UIColor and Color:

fileprivate extension UIColor {
    static func dynamicColor(light: UIColor, dark: UIColor) -> UIColor {
        UIColor {
            switch $0.userInterfaceStyle {
            case .dark:
                return dark
            default:
                return light
            }
        }
    }
}

extension Color {
    static var itemTextColor: Color = Color(uiColor: .dynamicColor(
        light: UIColor(red:0.278, green:0.278, blue:0.278, alpha: 1.0),
        dark: UIColor(red:0.800, green:0.800, blue:0.800, alpha:1.000))
    )
}

score -1 · Answer 14 · answered Dec 27 '20 at 13:47

-1

SwiftUI has colors that adapt automatically to the color scheme. For example, you can use .background(Color(.textBackgroundColor)) to get an appropriate background color for rendering text regardless of color scheme.

answered Dec 27 '20 at 13:47

JuJoDi

14,627
23
80
126

score -1 · Answer 15 · answered Feb 03 '23 at 00:27

If you want to switch between black and white color, make sure you don't set the

.foregroundColor(.black)

or

.foregroundColor(.white)

because it will force the color to be black on both dark and light mode.

If you remove it, the dark mode will have white color, and light mode will have black color.

Change background color when dark mode turns on in SwiftUI

15 Answers15

Linked