A custom color scheme has a name and a light and a dark version of each color. Create one when you want a second set of colors, such as a dark band for your footer, or when you want your brand colors under their own name. To change a color of the scheme you already use, change it on the Colors screen.
Create the scheme
Open your project in Fantasma.
In the icon rail, the narrow bar of icons along the edge of the editor, click the paintbrush icon, Styles.
Click Colors.
Under Custom, click the plus tile, Create custom color scheme. The editor opens with a copy of the scheme in use.
In Scheme name, replace the suggested name with your own, up to 20 characters, such as Harbor Night.
Click a color's name, such as Accent. A color picker opens on its background color. To change the text color on it instead, click Text at the top of the picker.
Enter a hex code in the picker's field, such as #0E7C86. Repeat steps 6 and 7 for each color you want to change.
Click Create custom scheme. The new scheme appears under Custom, and the theme uses it.
Clicking outside the editor also saves the scheme if you changed anything. Press Esc to close the editor without saving.
Background and text of each color
Most rows hold two colors: a background and the text on it. Click the first circle for the background and the second for the text, or click the name and switch between Background and Text at the top of the picker.
Row
Paints
Accent
Links inside text and accent buttons, and the text on those buttons
Base
The background of pages and sections, and their text
Primary
Primary buttons and the text on them
Secondary
Secondary buttons and the text on them
Muted
Quiet backgrounds, and quieter text such as captions and dates
Border
Lines and borders
Input
The borders of checkboxes and radio buttons in forms and post content
Success, Error, Warning, Notice
Success and Error color form messages. Error also colors required-field markers. All four show in the Style book and are available for your own custom CSS.
Keep or replace your Ghost accent
A copy of Classic, Dynamic, Sand, Zinc, Graphite or Stone keeps Site accent, the accent color set in Ghost Admin, as its accent. A color you enter for Accent replaces it in this scheme.
Set the dark colors
The sun and moon icons next to Colors switch the editor between the light and the dark version of the scheme. The canvas shows the version you are editing. Set both if your site uses dark mode, or if visitors can switch with a Dark Mode Toggle.
Check that text stays readable
A warning icon appears on a row when its text color and background color are too close to read well. Point at the icon to see the message: "This color combination may be hard for people to read." Fantasma shows it when the contrast is under 4.5 to 1, the level the WCAG accessibility guidelines ask for normal text. The warning does not stop you from saving.
Use the scheme
A new scheme becomes the theme's scheme as soon as you create it. To use it for one section or block only, pick it in that section's or block's Colors settings, then click your previous scheme's tile to make that the theme's scheme again. See Colors and appearance settings.
Edit, duplicate or delete a scheme
Click the three-dot button on the scheme's tile, then:
Edit opens the editor, where you can also rename the scheme. Click Update custom scheme to keep the changes.
Duplicate opens the editor with a copy. Built-in schemes have Duplicate too, except Dynamic.
Delete removes the scheme after you confirm. Sections and blocks set to it switch to Default, which follows the theme's scheme, and if it was the theme's scheme, the theme switches to Classic.
A project holds up to 12 custom schemes. At 12, the plus tile and Duplicate are grayed out.
A custom color scheme has a name and a light and a dark version of each color. Create one when you want a second set of colors, such as a dark band for your footer, or when you want your brand colors under their own name. To change a color of the scheme you already use, change it on the Colors screen.
Create the scheme
Harbor Night.#0E7C86. Repeat steps 6 and 7 for each color you want to change.Clicking outside the editor also saves the scheme if you changed anything. Press Esc to close the editor without saving.
Background and text of each color
Most rows hold two colors: a background and the text on it. Click the first circle for the background and the second for the text, or click the name and switch between Background and Text at the top of the picker.
Keep or replace your Ghost accent
A copy of Classic, Dynamic, Sand, Zinc, Graphite or Stone keeps Site accent, the accent color set in Ghost Admin, as its accent. A color you enter for Accent replaces it in this scheme.
Set the dark colors
The sun and moon icons next to Colors switch the editor between the light and the dark version of the scheme. The canvas shows the version you are editing. Set both if your site uses dark mode, or if visitors can switch with a Dark Mode Toggle.
Check that text stays readable
A warning icon appears on a row when its text color and background color are too close to read well. Point at the icon to see the message: "This color combination may be hard for people to read." Fantasma shows it when the contrast is under 4.5 to 1, the level the WCAG accessibility guidelines ask for normal text. The warning does not stop you from saving.
Use the scheme
A new scheme becomes the theme's scheme as soon as you create it. To use it for one section or block only, pick it in that section's or block's Colors settings, then click your previous scheme's tile to make that the theme's scheme again. See Colors and appearance settings.
Edit, duplicate or delete a scheme
Click the three-dot button on the scheme's tile, then:
A project holds up to 12 custom schemes. At 12, the plus tile and Duplicate are grayed out.