Skip to main content

​
Overview

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.
  • macOS
  • iOS
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.

​
Creating Dark and Light Mode Color Styles

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.

​
Using Dark and Light Mode Color Styles

You’ll change your project’s default mode through the settings, found in the top left corner of the app.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.