自定义SwiftUI颜色的黑暗模式

Question

我从设计师那里得到了一系列具有不同色调的颜色。这是我的制作方法

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")
}

这些“颜色”中的任何一个都不像系统提供的Colors那样自动响应暗模式。

如何分配“反转”颜色，以便无需使用系统颜色就可以利用深色模式？

Answer 1

一种根据自己的喜好分配“逆”色的方法，这样您就可以在不使用系统色的情况下利用深色模式：

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")
}

然后您这样称呼它：

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)})
    }
}

注意，您需要做更多的工作来“感知”模式更改，但这是另一个问题。