Colors and dark mode
Set solid and gradient colors, name your brand colors once, build a dark version of every color, and check that text is readable.
Use this page when you want to restyle a screen to your brand, change one color everywhere at once, or make the screen look right in dark mode.
Pick a color
Every color setting in the Design panel is a color field. Select a layer, open the Design panel, and click the swatch of a color field to open the color picker. You can also type a hex value in the box next to the swatch.
A color field that allows gradients has a menu above the swatch:
| Option | What it does |
|---|---|
| Solid | One color. |
| Linear Gradient | A gradient along an angle. Set Angle in degrees. |
| Radial Gradient | A gradient from the center outward. |
For a gradient, each stop has a color and a position in percent (0 to 100). Use Add stop to add one, and the remove button on a row to delete it. A gradient always keeps at least two stops. Switching between Solid and a gradient keeps your first color as the starting point.
Text color accepts gradients: the letters are filled with the gradient.
Fields that take a solid color only
These fields have no Solid or Gradient menu, because the renderer only accepts one color for them:
- Icon Color and Icon Background color
- Drop Shadow color
- The Text and Placeholder colors of a text field
- The two page-control dot colors of a carousel
- The thumb and track colors of a switch
If a color on an imported screen is in a shape the editor does not know, the field shows "This color can't be edited here." and leaves the value untouched.
Brand colors
Brand colors are a named palette for the whole screen. Link a color field to a brand color, and you change that color once to update every place that uses it.
To open the palette, select Screen at the top of the Layers panel (or click the gray area around the phone). The Design panel shows Brand colors above Screen Background.
Create the palette
- Create from this screen looks at the colors the screen already uses and makes up to six brand colors from them. It takes the screen's background color, the most used text color, and then the most used other colors. It then links every place that uses one of those colors. If a color is usually paired with a dark color, the dark color comes along.
- Add a color adds an empty entry named
color-1,color-2and so on, starting from#6B5BD6.
Once the palette has colors, the same area shows a table.
| Column | What it does |
|---|---|
| Light | The color used in light mode. Click the swatch to change it. |
| Dark | The color used in dark mode. Click the + to add a dark version (it starts as a copy of the light color), then change it. |
| Name | The color's name. Edit it and press Enter or click away to save. |
| Uses | How many places use the color. |
| Delete | Removes the color. |
Below the table, Add adds another color and Link matches links every plain color on the screen that equals a brand color. Linking matches light colors to light colors and dark colors to dark colors.
Names use lowercase letters, numbers, - and _, start with a letter, and are at most 24 characters. A name already in use is refused.
Use a brand color in a field
Under every color field you see a row of round swatches, one per brand color. Hover a swatch to see its name. Click one to link the field to it.
- A linked field shows the brand color's name and hex value instead of the picker.
- In light mode, picking a brand color that has a dark version links the dark mode color too.
- Click Detach to turn the link back into a plain hex color. If the other mode is linked to the same brand color, both modes are detached together, so they never end up half linked.
When you delete a brand color that is in use, each place that used it keeps the color as plain hex. Nothing turns blank.
Renaming a brand color renames it everywhere it is used.
Dark mode
A screen can carry a second set of colors for dark mode. You choose which one you are editing with the preview toggle.
Click the moon button above the canvas (Dark mode). The phone redraws in dark mode. The sun button (Light mode) switches back.
Select a layer. Every color field now edits the dark color. A small Dark tag shows next to the field name.
If the layer has no dark color yet, the field shows a dashed row with Same as light and a button Add dark color. Click it to create a dark color from the light one, then change it.
The preview toggle is a view setting. It is not saved with the screen and does not change what visitors see.
What you set per mode:
- Colors: each color field has a light and a dark value.
- Images: see Images and icons for Add dark image.
- Brand colors: each has a Light and an optional Dark value.
If a color has no dark value, visitors in dark mode see the light value. The editor never inverts colors for you.
What visitors see
Your site chooses the mode with the colorMode option of the Web SDK: light, dark or system. system follows the visitor's device setting. When you do not set it, the screen shows in light mode.
import { configure } from '@ui-kit/web';
configure({ apiKey: 'pk_...', colorMode: 'system' });See Present a paywall for the full option list.
Check text contrast
When you select a Text layer, the Design panel shows a contrast check under Text Color. It compares the text color with the solid color behind it, in the mode you are previewing.
| Message | Meaning |
|---|---|
A green line such as 4.6:1 Easy to read | The ratio meets WCAG AA. |
An amber line such as 2.1:1 Hard to read. Aim for 4.5:1 or more | The text is hard to read. |
| "Contrast can't be measured here: the text or what's behind it is a gradient or image. Check it on the canvas." | The editor cannot compute a ratio. Look at the canvas instead. |
The line also says which color is behind the text, and "dark mode" when you are previewing dark. The target is 4.5 to 1, or 3 to 1 for large text. Large text is 24 px or bigger, or 18.66 px or bigger in bold.
The editor finds the color behind the text by looking at the nearest layer with a solid fill, then the screen background, then white in light mode. The check is a warning only. It never blocks publishing.
Tips
- Create the brand colors first, then link fields to them. Adding a dark version to each brand color covers most of dark mode in one pass.
- Preview both modes before you publish. The Getting started checklist in the editor has a step for this.
- Keep the Uses count in mind before deleting a color: it tells you how many places will fall back to plain hex.
Related
- Screen settings for the screen background
- Typography and fonts
- Images and icons
- Canvas and devices