CODEWITHSUNDEEP
swiftuicustomizationios-darkmode
Jon Vogel
Jon Vogel

Reputation: 5644

Dark mode for custom SwiftUI Color

I get a series of colors with different hues from my designer. Here is how I make them

public struct Colors {
    public static let blue = Blue()
    public static let grey = Grey()
    public static let black = Black()
    public static let green = Green()
    public static let orange = Orange()
    public static let red = Color(hexString: "#F8454D")
    public static let yellow = Color(hexString: "#FFAE03")
    public init() {

    }
}

public struct Blue {
    public let light: Color = Color(hexString: "9AB1D0")
    public let medium: Color = Color(hexString: "215499")
    public let dark: Color = Color(hexString: "153662")
}

public struct Grey {
    public let light: Color = Color(hexString: "CCCDD0")
    public let medium: Color = Color(hexString: "757780")
    public let dark: Color = Color(hexString: "404146")
}
public struct Black {
    public let light: Color = Color(hexString: "A2A4A6")
    public let medium: Color = Color(hexString: "33383D")
    public let dark: Color = Color(hexString: "0A0B0C")
}
public struct Green {
    public let light: Color = Color(hexString: "ACD3BA")
    public let medium: Color = Color(hexString: "499F68")
    public let dark: Color = Color(hexString: "285739")
}
public struct Orange {
    public let light: Color = Color(hexString: "F4BBA5")
    public let medium: Color = Color(hexString: "E76B39")
    public let dark: Color = Color(hexString: "542715")
}

None of these 'Color''s respond to dark mode automatically like system provided Colors's do.

How do I assign an "inverse" color so that I can take advantage of dark mode without using system colors?

Upvotes: 2

Views: 429

Answers (1)

workingdog support Ukraine
workingdog support Ukraine

Reputation: 36872

One way to assign an "inverse" color of your liking so that you can take advantage of dark mode without using system colors, is this:

public struct Colors {
    public var blue: MyColor = Blue()
    .....

    public init(colorScheme: ColorScheme) {
        self.blue = colorScheme == .light ? Blue() : BlueForDarkMode()
     .....
    }
}

public protocol MyColor {
    var light: Color { get }
    var medium: Color { get }
    var dark: Color { get }
}

// Orange for testing
public struct BlueForDarkMode: MyColor {
    public let light: Color = Color(hexString: "F4BBA5")
    public let medium: Color = Color(hexString: "E76B39")
    public let dark: Color = Color(hexString: "542715")
}

public struct Blue: MyColor {
    public let light: Color = Color(hexString: "9AB1D0")
    public let medium: Color = Color(hexString: "215499")
    public let dark: Color = Color(hexString: "153662")
}

then you call it like this:

struct ContentView: View {

    @Environment(\.colorScheme) var colorScheme

    @State var myColors = Colors(colorScheme: .light)

    var body: some View {
        Rectangle()
            .frame(width: 300, height: 300)
            .foregroundColor(myColors.blue.medium)
            .onAppear(perform: {self.myColors = Colors(colorScheme: self.colorScheme)})
    }
}

Note, you will have to do a bit more work to "sense" mode changes, but that's for another question.

Upvotes: 3

Related Questions