macOS

Implementing Dark Mode with macOS Mojave and Swift

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.

Screenshot-2018-11-15-at-11.35.41

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”

Screenshot-2018-11-15-at-11.40.21

Now you’ll have something that looks like this:

Screenshot-2018-11-15-at-11.43.35

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.

Screenshot-2018-11-15-at-12.01.58-1

You’ll see another colour swatch appear. Clicking a swatch will let you set the colour values:

Screenshot-2018-11-15-at-12.05.56

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
}

Observe Screen Locking in macOS

In Quids, similar to 1Password, we lock the app when your Mac locks.

There are two notifications sent via the DistributedNotificationCenter. One when the screen is locked and the other when it is unlocked. I couldn't find any predefined variables so created this Notification.Name extension:

internal extension Notification.Name
{
    static let screenIsLocked = Notification.Name("com.apple.screenIsLocked")
    static let screenIsUnlocked = Notification.Name("com.apple.screenIsUnlocked")
}

Then all that is left to do is register an object as an observer:

DistributedNotificationCenter.default().addObserver(self, selector: #selector(...), name: Notification.Name.screenIsLocked, object: nil)

Send Money with the Coinbase Swift SDK


Photo by Thought Catalog / Unsplash

I recently added the ability to send money using the Coinbase Swift SDK that we're building alongside Quids.

When going through the OAuth flow you need to add the CoinbaseAPIClient.Scope.createTransactions to your list of scopes:

let authScopes: [CoinbaseAPIClient.Scope] = [
    .readAccounts,
    .readTransactions,
    .createTransactions(sendLimit: 500.0, currencyCode: "USD", period: .day)
]

Then once you have the required permission you will need to build a SendMoney request and pass that to your CoinbaseAPIClient:

let request = CoinbaseAPIClient.SendMoney(to: ethAddress, amount: 2.5, currencyCode: "ETH")

coinbase.send(money: request, from: accountID, twoFactorCode: nil) { (transaction, errors) in
    // ...
}

You'll notice this function can also take a 2FA code. If Coinbase returns a CoinbaseAPIClient.APIError.twoFactorRequired error, you should ask your user for a 2FA code and then re-call the send money function with the 2FA code.

Here is an example of how we're doing this in Quids:
Screen-Shot-2018-06-25-at-07.02.56