在 SwiftUI 中根据浅色或深色模式更改 buttonStyle 修饰符

Question

我想为浅色和深色模式的按钮设置自定义 buttonStyle 修饰符。如何根据浅色或深色模式更改 buttonStyle 修饰符？我想为我的按钮设置亮暗模式的自定义修饰符。

这是我的按钮代码，

Button(action: {
    print("button tapped")

}, label: {
    LinearGradient(gradient: Gradient(colors: [.darkBlueColor, .lightBlueColor]), startPoint: .top, endPoint: .bottom)
        .mask(Image(systemName: "ellipsis")
            .resizable()
            .aspectRatio(contentMode: .fit)
    ).frame(width: iPhoneSE ? 26 : 25, height: iPhoneSE ? 26 : 25, alignment: .center)
})
.buttonStyle(lightButtonStyle())

struct lightButtonStyle: ButtonStyle {

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
        .padding(10)
        .background(
            Group {
                if configuration.isPressed {
                    Circle()
                        .fill(Color.offWhite)
                        .overlay(

                            Circle()
                                .stroke(Color.lightGray2, lineWidth: 4)
                                .blur(radius: 1)
                                .offset(x: 2, y: 2)
                                .mask(Circle().fill(LinearGradient(Color.black, Color.clear)))
                        )
                        .overlay(
                            Circle()
                                .stroke(Color.white, lineWidth: 4)
                                .blur(radius: 1)
                                .offset(x: -2, y: -2)
                                .mask(Circle().fill(LinearGradient(Color.clear, Color.black)))
                        )
                } else {
                    Circle()
                        .fill(Color.offWhite)
                        .shadow(color: Color.white.opacity(0.8), radius: 1, x: -2, y: -2)
                        .shadow(color: Color.lightPurple.opacity(0.6), radius: 1, x: 2, y: 2)
                }
            }
        )
    }
}

对于深色模式，我有另一个具有不同颜色和阴影的 buttonStyle。

我知道我们可以像这样更改其他修饰符，

.fill(colorScheme == .dark ? Color.darkEnd : Color.white)

但有些我无法更改 buttonStyle 修饰符。

Answer 1

只要把那个条件放在按钮样式修饰符里面，比如

// ... other your code
})
.buttonStyle(CustomButtonStyle(scheme: colorScheme)) // << here !!

和自定义样式

struct CustomButtonStyle: ButtonStyle {
    var scheme: ColorScheme              // << here !!

    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
        .padding(10)
            Group {
                if configuration.isPressed {
                    Circle()   // example of internal dependency on scheme
                        .fill(self.scheme == .dark ? Color.offBlack :  Color.offWhite)

    // .. other code here
}

Answer 2

您可以在 Assets.xcassets 中定义一个命名颜色，并为深色模式设置一个变体：

即使在 ButtonStyle 中也可以开箱即用：

Color("ButtonBorder")

在 SwiftUI 中根据浅色或深色模式更改 buttonStyle 修饰符

Change buttonStyle Modifier based on light or dark mode in SwiftUI

button

ios

swift

swiftui

ios-darkmode