Different shades or overlays in form elements

Question

Created Dec ’21

Replies 1

Boosts 0

Participants 1

I'm stuck with some UI-work in my macOS app, currently designing form elements. I am trying to stay in SwiftUI, but I guess running to the limits of it.

All my input elements should have the same background color (see image, #1)

Bildschirmfoto 2021-12-28 um 10.53.09.png

In the DatePicker() I managed to set the background color and crop it with

 .background(
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.myBackgroundColor)
            )

but it still has a slightly different color in the text field (around the arrows it's correct, where I marked it with 2 it is a litte bit brighter)

Even worse is the picker (3): The color is set to the same value, but some overlay makes it way brighter. My modifier looks like this:

.background(Color.myBackgroundColor)
            .cornerRadius(10)
            .overlay(
                   RoundedRectangle(cornerRadius: 10)
                       .stroke(Color.myBorderColor, lineWidth: 1)
               )

Also, is there a way to change the blue of the picker (4)?

Probably I need to find a similar solution like in the TextEditor() where I used this:

extension NSTextView {
    open override var frame: CGRect {
        didSet {
            backgroundColor = .clear //<<here clear
            drawsBackground = true
        }
    }
}

Boost

Answer 1

JayEnn OP

Dec ’21

Not a 100% complete answer but at least something I found out in the meantime:

extension NSDatePicker {
    open override var frame: CGRect {
        didSet {
            isBordered = false
        }
    }
}

works perfectly well for the DatePicker().

The same extension for NSPopUpButton leads to having the right color and removing the color from the arrows (4) - the whole picker shrinks though and is pressed into a very small frame. Now I need to get it back to the right size and will be totally happy - but this doesn't really work out yet...

0