How to override styles in SwiftUI

Issue #688

In the app I’m working on Elegant Converter, I usually like preset theme with a custom background color and a matching foreground color.

Thanks to SwiftUI style cascading, I can just declare in root MainView and it will be inherited down the view hierachy.

struct MainView: View {
    var body: some View {
        HSplitView {
            ListView()
            RightView()
        }
        .foregroundColor(R.color.text)
        .background(R.color.background)
    }
}

This works great regardless of system light or dark mode, but in light mode it does not look good, as my designed theme is similar to dark mode. Here the color is pale for default Picker and Button.

The way to fix that is to reset the foregroundColor, take a look at the documentation for foregroundColor

The foreground color to use when displaying this view. Pass nil to remove any custom foreground color and to allow the system or the container to provide its own foreground color. If a container-specific override doesn’t exist, the system uses the primary color.

So we can pass nil and the controls will pick the correct color based on system preferences.

Picker(selection: intent.fileType, label: EmptyView()) {
    ForEach(filtered, id: \.self) {
        Text($0.dropdownName)
    }
}
.foregroundColor(nil)

Button(action: convert) {
    Text("Convert")
}
.foregroundColor(nil)

Now Picker and Button look nice in both dark and light mode

Updated at 2020-11-01 04:57:11