[ad_1]
Much like many iOS apps corresponding to Apple Maps, I am utilizing SwiftUI Materials fills to create translucent backgrounds for overlay components corresponding to backside sheets and popup dialogs.
My drawback is that the primary content material of my app has a extremely detailed however monochromatic/greyscale coloration scheme. In mild mode, this isn’t a lot an issue as a result of I can use drop shadows to create visible separation between layers, however in darkish mode, the darkish gray principal content material blends in an excessive amount of with the darkish gray background materials of the overlays.
So I have been making an attempt to discover methods to make the layers visually distinct by giving the overlays a extra saturated coloration with out dropping the translucency impact. Since supplies corresponding to ultraThickMaterial don’t have any express coloration, I have been making view modifiers like this:
// Be certain that to make use of this background in darkish mode ONLY
struct OverlayBackground: ViewModifier {
let cornerRadius: CGFloat = 10
let cornerStyle: RoundedCornerStyle = .steady
func physique(content material: Content material) -> some View {
content material
.background(
ZStack {
RoundedRectangle(cornerRadius: self.cornerRadius, type: self.cornerStyle)
.fill(.ultraThickMaterial)
RoundedRectangle(cornerRadius: self.cornerRadius, type: self.cornerStyle)
.fill(Colour.blue)
.opacity(0.3)
}
)
}
}
That is virtually works nicely, besides the compositing does not look fairly appropriate. The highest blue scrim rectangle washes out the underside translucency an excessive amount of, making the background look barely light and muddy. I’ve already tried adjusting the opacity worth and utilizing completely different materials thicknesses.
Are there some other methods to inject some express coloration tinting into Materials? Ideally a technique that does not require choosing arbitrary opacity values?
[ad_2]
