How to define custom colors in SwiftUI

Apple officials do not recommend customizing colors, but use official colors. For details, see: Color - Foundations - Human Interface Guidelines - Design - Apple Developer However, you can still customize the color of some attributes (such as background) in SwiftUI. There are two ways:

##UIColor

The first method is relatively simple to define, as follows:

struct secondThinkView: View {
     let brightRed = UIColor(displayP3Red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
     var body: some View {
         VStack{
                 Spacer()
                 Button(action: do) {
                     Text("1111")
                 }
                 .padding()
                 .background(Color(brightRed))
         }
     }
}

Or this format:

struct secondThinkView: View {
     var body: some View {
         VStack{
                 Spacer()
                 Button(action: do) {
                     Text("1111")
                 }
                 .padding()
                 .background(Color(UIColor(displayP3Red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)))
         }
     }
}

This is the format under the P3 color gamut. The transparency part (alpha) can be deleted.

However, it should be noted that the numbers 0 to 255 are not used here to define RGB. Instead, it ranges from 0.0 to 1.0 (including decimals). If you want to use 255 to represent rgb, use a fraction, such as 123/255.

If you need only RGB format, just delete displayP3.

If HSB format is required, as follows:

UIColor(hue: CGFloat, saturation: CGFloat, brightness: CGFloat, alpha: CGFloat)

Color Set

Although the second method is a little more troublesome, it is a very convenient color management method.

In Xcode, select Assets.xcassets, right-click in the area in the image, and select “Color Set”:

Then the following picture appears:

In this way, you can set the related attributes and colors of the color set in the settings on the right sidebar:

Color Set: Here are the Color Set (color set) related properties.

Name: Customize the name of the color, such as greenBlue. Devices: For devices using this color, generally select Universal. Appearances: There are three options here: “None”, “Any, Dark” and “Any, Light, Dark”. It is recommended to select “Any, Dark”. Because the color settings of the third Any and Light should be the same. “Any Appearance” refers to the color displayed in universal mode (including Light Mode), and “Dark Appearance” refers to the color displayed in Dark Mode when the device is set to Dark Mode. High Contrast: High contrast. This setting is generally not used in UI design, but is generally used in image processing. Selecting this will let you set four colors (luminosity means glow), as follows:

Gamut: Set the color range/gamut here. The options are “Any” and “sRGB and Display P3”. Generally, Any is sufficient. Localization: localization/localization. This option can be set to display different colors in different locales. The default is only English. If you want to add or change this option, click on the project file at the top of the left sidebar and select Info, as shown below:

Then you can change the Localization attribute as shown in the figure.

Color: This is the part that defines the color.

Content: In this section, you can select the color gamut, color range and some system-built-in colors. Generally, to customize the color, select “Display P3”. Input Method: If Content selects a color gamut or range, this attribute will appear. There are three options here: “Floating point (0.0-1.0)”, “8-bit (0-255)” and “8-bit Hexadec”, which respectively represent “floating point value (represented by a value between 0.0-1.0)” Color-related values)”, “8bit (use 0-255 to represent color-related values)” and “Hexadecimal representation”. “8-bit (0-255)” is recommended because many colors on the Internet are given values in this format, which is more convenient. Here’s how to use “Color Set”:

//If the background is set to a custom color————The string is the Name attribute of the defined Color Set
.background(Color("customColor"))

or

// macOS
let aColor = NSColor(named: NSColor.Name("customColor"))
 
// iOS
let aColor = UIColor(named: "customColor")

​I hope these will help someone in need~