With the latest macOS release, Apple introduced Dark Mode. Dark Mode changes the whole colour scheme of the OS to a darker, more subtle style. Not only does the OS change but so do the apps.
We recently added support for Dark Mode to Quids, our cryptocurrency Mac app. I was impressed with how easy Apple had made Dark Mode to implement and I expect to see a similar system come to iOS in the future.
If you have just used system colours such as NSColor.textColor
, NSColor. selectedTextColor
and NSColor.windowBackgroundColor
, then your work is done!
However, you most likely have some custom colours. Here is an example of what our colour setup originally looked like:
internal extension NSColor
{
internal struct Quids
{
internal static let buttonBackground = NSColor(deviceRed: 250.0/255.0, green: 250.0/255.0, blue: 250.0/255.0, alpha: 1.0)
// ... etc ...
}
}
First step is to create a new Asset Catalog. Choose where you want to add the new file, right click, New File, Asset Catalog. Give it whatever name you want, I like to live on the edge and use Colors.xcassets
.
Next you need to add a colour set. Do this by either right clicking on the asset catalog’s left list view or by clicking the +
button in the catalog’s bottom left and select “New Color Set”
Now you’ll have something that looks like this:
First things first, set the name. On the right side where it says “Name: Color” set this to whatever best describes your colour. I’m going to call mine ButtonBackground
.
As it stands, this colour set is only setup as having no appearance, meaning that no matter what colour mode the user has, our ButtonBackground
colour will always be the same.
On the right, select the “Any, Dark” appearance.
You’ll see another colour swatch appear. Clicking a swatch will let you set the colour values:
With the colours set, the last step is to update our code:
internal extension NSColor
{
internal struct Quids
{
internal static let buttonBackground = NSColor(named: "ButtonBackground")!
// ... etc ...
}
}
That’s it! We’re now all setup to use the colour in our app…
Using The Colour
If you’re using a standard control that takes an NSColor
, for example NSTextField
and NSWindow
then all you need to do is set our new colour:
self.textField.textColor = NSColor.Quids.buttonBackground
self.window.backgroundColor = NSColor.Quids.buttonBackground
However, if you’re doing something a little more custom, like setting a CALayer
’s background colour:
self.view.layer?.backgroundColor = NSColor.Quids.buttonBackground.cgColor
This won’t work. Never fear! There a few hooks that get called when the OS’s colour mode changes:
// NSViewController
override func updateViewConstraints()
{
super.updateViewConstraints()
self.view.layer?.backgroundColor = NSColor.Quids.buttonBackground.cgColo
}
// NSView
override func updateLayer()
{
super.updateLayer()
self.layer?.backgroundColor = NSColor.Quids.buttonBackground.cgColor
}
override func layout()
{
super.layout()
self.layer?.backgroundColor = NSColor.Quids.buttonBackground.cgColor
}
override func updateConstraints()
{
super.updateConstraints()
self.layer?.backgroundColor = NSColor.Quids.buttonBackground.cgColor
}
Update
We've recently released xPal which automagically generates a Xcode color asset catalog from a Sketch file!