Color styles are the colors used throughout a specific project. Your projects won't start with any Color Styles— it will instead use Apple's native System Colors by default. Once you've created your Color styles, you can use them in your project.

To create a Color style in macOS, click the plus icon in the Styles Panel. A new color will appear at the bottom of your Color styles list and a color panel will pop up for you to select a color. You can enter the RGBA values, the HEX code, or pick a color from the picker. Closing the panel and pop-up will automatically save your selected color.

Click on a Color style to edit it. Right-click on a Color style to duplicate, delete, or rename it.

You can also click the Dark Appearance button to add a dark version of the Color style; the original color will be the light version. When your project’s Appearance is light, all objects using a color style will use the light version of that color style. When your project’s Appearance is dark, all objects using a color style will use the dark version of that color style.

When your project’s UI Appearance is set to Auto, Play inherit’s each user’s device settings for UI Appearance. If a user has their phone in light mode, they’ll see the Play prototype in light mode, and vice versa.

To remove the Dark Mode version, just click the “x” on the dark segment.

You’ll change your project’s default mode using the Appearance property in the Project panel. It’s visible when nothing on the canvas is selected.

You can also change the Appearance of objects (elements or components) within your project. That selection will override the project’s appearance settings for the given object.

For example, in the image below, the project’s Appearance is set to dark mode. Everything within the project has “Auto” Appearance by default, so it will all inherit the project’s appearance and use dark mode colors. If you change the UI Appearance of the “Your Membership” card to light, it will be use the light mode colors, regardless of the project’s Appearance or the user’s device.

To create a Color style on iOS, tap the four circle icon, and select "Colors" from the menu that appears. Tap New Color, and a modal will appear where you can select your color type, edit the color value, and change your color’s name. You can adjust the color value using the color picker, RGB values, opacity, HEX code, or current color slider. Closing the modal will automatically save your color.

Edit your Color style by tapping on the color you'd like to edit, and adjusting the values the same way you created the initial color value.

To duplicate, delete, or rename your Color style, tap on the color name while in the color editor.