A color scheme defines the light or dark baseline of a template. A palette is a pre-made set of colors that serves as your starting point.
What you will learn
- Distinguish between a template scheme and the editor's UI theme.
- Select a predictable light or dark option.
- Use a color palette as a starting point.
- Understand current limitations of the Auto setting.
Two different "dark themes"
The editor can switch the appearance of its workspace interface to make your work more comfortable. This setting is stored locally in your browser and does not alter the published website. Conversely, the global color scheme setting belongs to the template configuration.
The light mode uses a light baseline and dark uses a dark baseline. The auto setting is saved and exported, but the full preview displays it as a light variant. For a predictable result, explicitly select light or dark.
Selecting a scheme and palette
- Open global styles and locate the color scheme settings.
- Choose light or dark.
- Select the closest pre-made palette or manually set your primary, secondary, and neutral colors.
- Inspect backgrounds, body text, links, buttons, menus, borders, and UI state elements.
- For dark designs, pay close attention to images with hard white backgrounds and overly aggressive drop shadows.
- Switch between sample page types and mobile previews. Finally, verify using a clean Preview.
Dark mode is not just inverted colors
Re-verify contrast, borders, photos, logos, and button states. An element easily readable on a white background might fail on a dark one.
Images, logos, and dark backgrounds
A logo featuring dark text might disappear entirely against a dark header. Similarly, a photo with a stark white border can create an unwanted bright rectangle inside a dark card layout. When choosing a scheme, review your media assets in addition to your CSS. You may need to prepare two separate logo assets for light and dark contexts on the live website.
Shadows also behave differently: a black drop shadow is virtually invisible on dark backgrounds, whereas a bright outline can look harsh. Consider using subtle borders and slight background color shifts instead. Check every major block in a clean preview without editor overlays active.