PhthaloBlueView.backgroundColor = NSColor(named: )
#Xcode colorset code
Here are the three code snippets that will get us up and running on macOS.įirst, we create an enum so we don’t have to worry about typing our color names as raw strings everywhere.Ĭlass ColorWindow: NSWindow var alizarinCrimsonView: var cadmiumYellowView: var phthaloBlueView: var phthaloGreenView: BackgroundColorView!ĪlizarinCrimsonView.backgroundColor = NSColor(named: )ĬadmiumYellowView.backgroundColor = NSColor(named: ) So let’s walk through how we would accomplish it in code. We could achieve the same results we had on iOS and tvOS using NSBox on macOS, but if we use NSView instead, we can’t change the background color in IB. It’s worth noting iOS and tvOS don’t support anything other than the display gamut at this time, but it may change at a later point. The selection interface even includes a dedicated section for all of your named colors! We add a few views, embed them in a stack view, set up our constraints, and then it’s as simple as changing the background color for each view. We’ll start with examples on iOS and tvOS using Interface Builder. Great, so now we have four colors defined. switching between light and dark mode on Mojave). As was the case with cadmium yellow, these colors will change automatically given the right circumstances (e.g. For Phthalo Green, we want to define a brighter color for Dark appearance. For Phthalo Blue we’ll supply a High Contrast variant by checking the corresponding checkbox under Appearance. Change them back to what we had (237, 135, 45), and if you’re working on a P3 display you’ll see a more vibrant color than before.įollowing these same general steps, let’s create two more colors. You’ll notice the color is still the same, but the values we supplied before are different. A new color has been added in the editor below the original, and both currently reflect the color values we set earlier. Now change Gamut from Any to sRGB and Display P3. Let’s add a new color, and name it Cadmium Yellow. Next up, let’s say we want a more vibrant color on a P3 display. Do the designers on your project always provide colors in hex format? Well, you can change the input method to 8-bit Hexadecimal and input the value they sent you directly. The next item of interest is the input method. sRGB is selected for us by default, but you can also choose to use another gamut, or even choose a system color.
#Xcode colorset update
The attributes inspector will update to include a new Color section. Now, select the image representation of our new color in the editor. Since our colors will be shared across all platforms, and for consistency between them, it’s important to keep Universal checked under Devices, but you can always define colors per platform if your project needs call for it. I’ve chosen color names here familiar to a painter, but you can name a color whatever you want, perhaps to represent intention like “default button”. Let’s name the first one Alizarin Crimson.
You can change the name of this color over in the attributes inspector. With our colors asset catalog selected, select New Color Set from the Editor -> Add Assets menu item. The next step will be to create a new asset catalog shared across all targets. We’ll start off with an empty iOS app, and add additional targets for tvOS and macOS. The sample project for this article has examples of usage across all platforms, and any following code and screenshots will indicate which platform they are for. Let’s see how named colors make our lives easier, and also take a look at the enhancements coming in the 2018 SDKs.
Named colors are added to an asset catalog, and can then be used directly in Storyboards and Nibs, or in code using a new suite of initializer APIs. The 2017 SDK releases (iOS 11, macOS 10.13, tvOS 11, and watchOS 4) and Xcode 9 introduced the concept of named colors. These are features like the True Tone display and P3 display gamut shipping in most Apple products, and interface styles (Light and Dark), available in tvOS and coming soon to macOS Mojave.
In the last few years alone, Apple has introduced multiple technologies making it worth revisiting how we approach the use of color in our apps. It identifies brand, evokes emotion, and teaches us things like whether a button can be touched. Color is a fundamental and important aspect of app development.
0 kommentar(er)
