How to add a new SwiftUI Color

Viewed 7557

How can i add a SwiftUI Color? Normally on UIKit you can create your own Colors but in SwiftUI con Color struct it's not easy like UIColor, but it's not complicate.

extension UIColor {
    UIColor(red: 219/255, green: 175/255, blue: 15/255, alpha: 1.0)
}
7 Answers

You can create your own SwiftUI Color with Color extension in a new file.swift

import SwiftUI

extension Color {
    public static var myCustomColor: Color { 
        return Color(UIColor(red: 219/255, green: 175/255, blue: 15/255, alpha: 1.0))
    }
}

You can create a color set like this one (which is called "black")

And after in your code just create an extension of Color:

import SwiftUI

extension Color {
    static let customBlack = Color("black")
}

And when you will use this customBlack, if you turn you app in darkMode it will use the dark appearance that you have set in your colorset.

You can use it like this in your code:

Image(systemName: "person.crop.circle")
.foregroundColor(.customBlack)

Add New color set file in Assets.xcassets and colors with name.

Code: Color("ColorName")

You can create Color+Extension.swift file and add RGB's of your colors.

import SwiftUI


extension Color {
    public static var brokenWhite: Color {
        return Color(red: 238.0 / 255.0, green: 238.0 / 255.0, blue: 238.0 / 255.0)
    }

    public static var darkGray: Color {
        return Color(red: 57.0 / 255.0, green: 62.0 / 255.0, blue: 70.0 / 255.0)
    }
}

I prefer to create a named color on assets and put it in my extension, this way I don't have any problem switching between light and dark mode

extension Color {
   public static var primary: Color {
       return Color("primary-color")
   }
}

You can create new SwiftUI color with an extension of Color. The extension does not need to be in a new Swift file, but it keeps your code clean to collect all Color extensions in one file.

Method 1: Use the RGB initializer:

(this is what OP was asking)

extension Color {
    public static let myNewSwiftUIColor = Color(red: 219.0 / 255.0, green: 175.0 / 255.0, blue: 15.0 / 255.0, opacity: 1)
}
  • Parameter opacity replaces alpha
  • No need to call UIColor initializer
  • Use let, not var.

Method 2: Use XCode Color Set:

(others have answered, but incomplete or problematic)

extension Color {
    public static let myNewSwiftUIColor = Color("myNewSwiftUIColor")
}

Use new color in your code:

Text("Example")
.foregroundcolor(Color.myNewSwiftUIColor)

Hint 1:

I had been wondering how to choose a color in a Color Set in Assets. For those who didn't find this yet:

  • In Assets.xcassets, click on the Plus icon to add a Color Set.
  • Give it a name by double clicking newly created color set 'Color' in the asset list. This will be the name string you have to provide in extension Color. E.g. myNewSwiftUIColor
  • Click on one of the white color pads (Any Appearance / Dark Appearance).
  • Then in the right column of XCode, click on the gauge icon to show Attributes Inspector.
  • Make your color choice from the well known picker GUI ;-)

Seems simple once you know it.


Hint 2:

As with all definitions, you can give a inline documentation that will show up in many places in XCode, e.g. Quick Help.

/// Like Color.green with a tad more yellow
/// - Note: Customized from Color 'Spring' from pallette 'Crayons'
public static let crayonOffSpring = Color("crayonOffSpring")    }

I have found this helpful especially with colors, as to remember what it's for or where it came from.

import SwiftUI

extension Color {
    
    init(red: Int, green: Int, blue: Int, opacity: Double = 1) {
        self.init(
            .sRGB,
            red: Double(red) / 255.0,
            green: Double(green) / 255.0,
            blue: Double(blue) / 255.0,
            opacity: opacity
        )
    }
    
    static var twitterBlue: Color {
        return .init(red: 0, green: 0, blue: 255)
    }
}
Related