SwiftUI - Color in the code does not match color set in assets

Question

I had some custom color being repeated in different views, so I decided to move them to Assets as Color set, create a constant and then use it in my views.

However I am noticing the color that I used in code(Colors are in CircularButtonWithImage_Previews) is not same as the color that I see in Assets. I wasn't passing opacity in the code and by default opacity is 100%. Even Assets has opacity as 100% by default. Seems like dark gray background color(menuOptionsBackground) is black or maybe that both the colors are being accessed since I don't see blue foreground(menuOptionsForeground) color too.

What am I doing wrong?

Color when passed via code:

import SwiftUI

struct CircularButtonWithImage: View {
    var imageName: String = ""
    var imageBackgroundColor: Color?
    var imageForegroundColor: Color?
    var imageFrameWidth: CGFloat = 0.0
    var imageFrameHeight: CGFloat = 0.0
    var imagePadding: CGFloat = 0.0
    
    @State var isShowingDetailView = false
    var isButtonClicked = false
    
    var body: some View {
        Button(action: { isShowingDetailView = true }) {
            VStack{
                Image(imageName)
                    .renderingMode(.template)
                    .resizable()
                    .scaledToFill()
                    .frame(width: imageFrameWidth, height: imageFrameHeight)
                    .padding(imagePadding)
                    .background(imageBackgroundColor)
                    .foregroundColor(imageForegroundColor)
                    .clipShape(Circle())
            }
        }
        .buttonStyle(PlainButtonStyle())
    }
}

struct CircularButtonWithImage_Previews: PreviewProvider {
    static var previews: some View {
        CircularButtonWithImage(imageName:"settings",
                                imageBackgroundColor: Color(red: 34 / 255, green: 34 / 255, blue: 34 / 255),
                                imageForegroundColor: Color(red: 23 / 255, green: 121 / 255, blue: 232 / 255),
                                imageFrameWidth: 20.0,
                                imageFrameHeight: 20.0,
                                imagePadding: 10.0)
    }
}

Output from above code:

It's the dark gray circle as background and blue color as foreground.

Adding color to Assets i.e. Color(red: 34 / 255, green: 34 / 255, blue: 34 / 255) shows black:

Color extension:

import Foundation
import SwiftUI

extension Color {
    static let actionButtonsBackground = Color("ActionButtonsBackground")
    static let blueButton              = Color("BlueButton")
    static let menuOptionsBackground   = Color("MenuOptionsBackground")
    static let menuOptionsForeground   = Color("MenuOptionsForeground")
}

score 1 · Answer 1 · answered Jun 25 '22 at 01:25

Posting the solution as an answer for someone looking for it in future.

My watchOS app is a companion app for iPhone. Hence my app was looking for colors in iOS projects's Assets file even though both the Assets files i.e. iOS and watchOS Assets files are linked to my watchOS project. In my Color extension, I even tried adding bundle id(adding example below), but it didn't work in my case.

When I added the colors to my iOS Asset's file, then the colors started showing up.

// This didn't work for me, but you could give it try.
static let blueButton = Color("BlueButton", bundle: Bundle.init(id:"{bundle id of my watchOS app}"))

SwiftUI - Color in the code does not match color set in assets

1 Answers1