How to use Colors in SwiftUI the right way? (Specially for Applications with Light and DarkMode)

user_11379137 0
Viewed 777

I have a small Question about SwiftUI and programming for Darkmode. I am programming in swift for like 4 month by now and I want to start programming for Dark Mode and Light Mode.

In SwiftUI there are a few methods to Color something, for example a Text. If I want to color the Foreground from the Text Green there are the following ways to do it (correct me if I am wrong):

.foregroundColor(.green)
.foregroundColor(Color.green)
.foregroundColor(Color(UIColor.green))
.foregroundColor(Color(UIColor.systemGreen)) <- I usually do this

In Light Mode, this works, but if I switch to dark Mode, some of my Components are colored differently, for Example if I have a black foreground, this foreground is now white. But with some other Components, its black.

Can you guys give me an Example how I should properly program for Darkmode? Which of these 4 Methods above should I use? Or is there a different way? Or do you have other Tips for Coloring Fore- and Background with SwiftUI?

Note: I am not trying to find a Solution for a specific Problem, I just want to understand how all of the Colors and different Methods of coloring works in SwiftUI. I already Googled stuff but didn't find something that I understood, so I try my luck here :D

swiftui swift ios
2 Answers

Color is a view in SwiftUI.

UIColor is subclass of UIKit.

You can initialize Color with UIColor, and standard colors that support dark mode have "system" prefix systemBlue, systemGreen...

So if you want to use Apple's standard color supporting Dark mode, you should use the 4th method

.foregroundColor(Color(UIColor.systemGreen))

P/s: You can use the Color Assets then initialize with its name

.foregroundColor(Color("colorName"))
user_48034290

The first, second and last line shows the same color. The third line is different.

.green and Color.green are synonyms anyway. In SwiftUI the basic colors (.red, .green ...) are the same as the corresponding .systemRed, .systemGreen ... colors in UIKit.

You can prove it by running this code

struct ContentView: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.green)
            Rectangle()
                .fill(Color(UIColor.systemGreen))
            Rectangle()
                .fill(Color(UIColor.green))
        }
    }
} 

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
        ContentView()
            .colorScheme(.dark)
    }
}

The first two colors are identical but slightly different in light and dark mode. The third color is fixed in both modes. There is no reason to use the system... colors of UIColor in SwiftUI.

You can create custom colors with different appearance for light and dark mode in the Asset Catalog and use it with init(_:bundle:)

user_50440420
Related