swiftui - 自定义 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")
}

这些“颜色”都不会像系统提供的颜色那样自动响应深色模式。

如何分配“反色”颜色，以便我可以在不使用系统颜色的情况下利用深色模式？

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

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