Screen settings
Set the background and brand colors for the whole screen, and see how the root stack, header, footer, dark mode and safe areas fit in.
Screen settings apply to the whole screen rather than to one component. You use them to give the screen a background, to name the few colors your design is built on, and to decide how the screen looks in dark mode.
Open them in either of these ways:
- Select Screen, the first row in the Layers panel.
- Click the gray area around the device on the canvas.
The design panel header then reads Screen with the note The whole screen. The panel has two sections: Brand colors and Screen Background.
Brand colors
Brand colors are a named palette for the screen, for example brand, text and background. A color field anywhere in the editor can link to a brand color by name. Change the brand color once and every linked place updates, in light and dark mode.
With no colors yet, the section says to name the few colors this screen is built on, and offers two buttons:
| Button | What it does |
|---|---|
| Create from this screen | Builds a starting palette from colors the screen already uses and links the matching places to it. A toast confirms Brand colors created from this screen. |
| Add a color | Adds one empty color to name and set yourself. |
Create from this screen picks up to six colors: the background of the root stack (named background), the text color used most (named text), then the most used remaining colors (named color-1, color-2 and so on). If a color is always paired with the same dark color, the dark color comes along.
Once you have colors, each one is a row:
| Part | What it does |
|---|---|
| Light swatch | Click to open a color picker and change the light value. |
| Dark swatch | Click to change the dark value. If the color has no dark value, a dashed + button (Add a dark mode version) creates one, starting as a copy of the light value. |
| Color name | The name. Press Enter or click away to rename. Every place that uses it follows the new name. |
The count, such as 3× | How many places use this color. Hover for the exact count. |
| Delete (appears on hover) | Removes the color. Places that used it keep the color as a plain hex value, so nothing changes visually. |
Below the rows:
| Button | What it does |
|---|---|
| Add | Adds a color named color- followed by a number, starting as #6B5BD6. |
| Link matches | Finds plain colors that equal a brand color and links them. Light values are matched to light, and dark values to dark. A toast says Matching colors linked. |
Names must start with a lowercase letter, use only lowercase letters, numbers, hyphens and underscores, and be at most 24 characters. Otherwise the editor says Use lowercase letters, numbers, "-" or "_", starting with a letter. A name that already exists is refused with There is already a color named and the name.
To use a brand color, open any color field and click its swatch under Brand colors. To turn a link back into a plain color, click Detach on that field. See Colors and dark mode.
Gradients keep their own colors. Brand colors link only to solid colors, not to the stops of a gradient.
Screen Background
Screen Background is the backdrop behind the whole screen. It is optional. Click + (Add screen background) to turn it on, and − (Remove screen background) to remove it. Turning it on starts as a white color.
| Control | What it does | Default |
|---|---|---|
| Background (Color or Image) | Chooses the kind of background. Switching kinds replaces the current setting with a fresh one. | Color |
| Color | A solid color, Linear Gradient or Radial Gradient. A linear gradient also has an Angle in degrees. Each gradient stop has a color and a position in percent, and you can Add stop or remove a stop. A gradient needs at least two stops. | Solid white |
| Image picker | Choose Image or Change Image opens the Image Library. See Images and icons. | Placeholder image |
| Fit Mode | Fit content shows the whole image. Fill covers the area and crops the image as needed. | Fit content |
| Color Overlay | An optional color laid over the image, useful to keep text readable. Click + to add it. | Off, black when added |
In dark mode the color field edits the dark color, and the image picker edits the dark image. See below.
The root stack is drawn on top of the background. If the root stack has a Fill of its own, it hides the screen background. Leave the root stack's Fill off to let the screen background show, or use the root stack's Fill when you want a color that follows the content area.
The status bar and home indicator in the device preview take their color from the root stack's Fill, not from Screen Background. If you only set a screen background, the preview bars show the editor's neutral color. On your site there is no status bar, so this affects the preview only.
The root stack, header and footer
The content of a screen starts from three parts, all in the Layers panel and all with their own settings.
- The root stack is the main content. Select it in Layers or click empty space on the phone. Its settings are those of any Stack, and its Fill, Padding and Gap act as page-wide margins and spacing. The root stack scrolls when the content is taller than the screen.
- An optional Header pinned to the top.
- An optional Footer pinned to the bottom. It is always visible, which makes it the place for the purchase button.
Dark mode
There is no single switch for dark mode. A screen supports it color by color:
- Click Dark mode in the view bar to preview it.
- Select a layer. Each color field now edits the dark color. A color with no dark value reads Same as light. Click Add dark color to give it its own value.
- Do the same for images: Add dark image gives a dark version. Use the light image goes back to sharing one.
Colors without a dark value use the light color in dark mode too. That is the most common cause of black text on a dark background, so check dark mode before publishing.
The color mode your visitors see is set by your site, not by the screen. The Web SDK uses light mode unless the site passes the colorMode option as dark, or as system to follow the visitor's device. See Present a paywall.
Safe areas
The device preview reserves the space an operating system keeps for the status bar and home indicator, and draws your screen between them. There is no setting for it. See Canvas and devices.
Where the other screen-wide settings live
| Setting | Where |
|---|---|
| Screen name, project and list | Screens in the dashboard. See Screens |
| Languages and translated text | The Translations panel. See Localization |
| Custom variables | The Variables panel. See Variables |
| How the screen is shown (modal, banner, slide-in) | Placements. See Placement display |