skip to Main Content

Currently, by using this code.

Button(action: { }) {
    Image(systemName: "xmark.circle.fill")
        .imageScale(.large)
        .foregroundColor(Color(UIColor.lightGray))
}

My button will have

  • Transparent color cross mark
  • Light gray background

enter image description here

However, what if I would like to achieve

  • Black color cross mark
  • Light gray background

which looks like

enter image description here

May I know how I can achieve such? Thanks.

2

Answers


  1. Set the modifier symbolRenderingMode to palette and then select the colours you want

     Button(action: { dismiss() }) {
         Image(systemName: "xmark.circle.fill")
             .symbolRenderingMode(.palette)
             .imageScale(.large)
             .foregroundStyle(.black, .gray)
    }
    
    Login or Signup to reply.
  2. Use code like this:

    Button(action: {}) {
        Image(systemName: "xmark.circle.fill")
            .imageScale(.large)
            .foregroundStyle(.black,.lightGray)
    }
    

    Just know that you’ll have to define a color called lightGray in your assets file.

    Here’s an image:

    filled xmark circle

    That said, you should really consider using colors that adjust for the display mode (dark or light) and names that match. It’s trivial to define alternate colors in the assets file,

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search