xPal Help Guide

1 Create a new Page in your document named "xPal"

When xPal processes your Sketch file this is the page it runs against.

2 Add Artboards to the Page

Create a new Artboard for each color you want to define in your Xcode project. When xPal generates an Asset file each color will be named after the corresponding Artboard.

If you wish to specify a color to use in Dark Mode in macOS Mojave, append the Artboard name with "_dark". For instance if you create "Button" and "Button_dark" the colors will be grouped in the Asset file but "Button_dark" will be used for Dark Mode.

By default a color will be used for both Light and Dark appearances. To specify a color should only be used for Light appearances you can append "_light" to the Artboard name.

3 Add Symbols to the Artboards

When xPal processes an Artboard to find a color it first checks for a Shape layer in the Artboard that has a Color Fill and uses that.

If you're defining colors as Symbols in Sketch you can simply add one of these Symbols to your Artboard. xPal will lookup the Symbol and use the color fill from a Shape layer there.

1 Drop your file on the xPal window

Drop your Sketch file onto the xPal window to process the file.

2 Fix any errors

xPal will return an error message if it can't find a Page called "xPal" or if it is unable to process the Symbols in Artboards. Make sure the Page exists and that there are Artboards present. Each Artboard should contain a Symbol that has a Shape layer with a Color Fill.

3 Save the Asset catalog

When xPal completes processing the file you can Save the .xcasset folder it creates to a destination on your Mac. You can also drag and drop the folder from the window.

1 Add the catalog to your Xcode project

Copy the Asset Catalog (.xcasset) into your Xcode project.

2 Create variables for your colors

You can reference the colors in the Asset Catalog directly in your code.

init?(named name: NSColor.Name)

Apple Docs Implementing Dark Mode with macOS Mojave and Swift