A color scheme sets every color of your theme at once: the background, the text, the accent, and the colors for buttons, borders and messages. Pick a built-in scheme, then change single colors until it matches your brand.
Pick a color 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 Color scheme, click a tile. Point at a tile first to see its name. The pages change to the new colors.
The tiles run in this order: Classic (the default), Dynamic, Sand, Zinc, Graphite, Stone, Ocean, Indigo, Violet, Rose, Amber and Sage. Every one has a light and a dark version. The scheme you pick is the theme's default. A section or a block can use a different scheme in its own Colors settings; see Colors and appearance settings.
Classic, Dynamic, Sand, Zinc, Graphite and Stone use your site accent, which is the accent color set in Ghost Admin. Ocean, Indigo, Violet, Rose, Amber and Sage have an accent of their own. Dynamic builds all its colors from your site accent, so its colors cannot be changed one by one.
Change one color
Below the tiles and Custom, the screen lists every color of the scheme in use:
In Styles › Colors, click the row of the color you want to change, such as Accent. A color picker opens.
In the field under the color area, enter a hex code, such as #1F6FEB. The field takes 3, 4, 6 or 8 digits, with or without #.
Optional. Lower the opacity percentage next to the field to make the color see-through.
The first time you change a color of a built-in scheme, Fantasma copies the scheme into a custom one named after it, such as "Classic copy", and selects the copy. The built-in scheme stays as it was. Sections and blocks set to that built-in scheme by name keep it; the copy only becomes the theme's default. With Dynamic selected, the screen shows no color list, because Dynamic builds every color from your site accent. To take a change back, press ⌘Z, or Ctrl+Z on Windows.
A scheme has a light and a dark version of every color. The list shows the version for the color mode selected next to Color scheme, which is also the mode your site uses. To change the dark colors here, click the moon icon, Dark, change them, then click the icon of the mode your site should use. Until you switch back, your site's mode is Dark. To change dark colors without touching the mode, use the scheme's editor in Create your own color scheme. See Choose light, dark or automatic color mode.
Use your Ghost accent color
Site accent in a color's field means the accent color set in Ghost Admin. When it changes in Ghost, the theme follows without a new upload. In the preview, it shows your Ghost site's accent with Connected site preview data, and a demo red with Demo data. To go back to it after entering your own color, open the color picker and click the hex field inside it. In the list that opens, select Site accent. Ghost Admin keeps the accent color in its design settings, under the brand settings.
Hide schemes you do not use
To take a built-in scheme out of the scheme lists in Styles and in section settings, point at its tile, click the three-dot button that appears, and click Hide. Hidden schemes move under Hidden, below the tiles, and sections that use them keep working. To bring one back, click Show in the same menu.
To build a scheme from scratch with its own name, see Create your own color scheme. Fantasma saves your changes as you make them. Your Ghost site shows them after you publish your theme.
A color scheme sets every color of your theme at once: the background, the text, the accent, and the colors for buttons, borders and messages. Pick a built-in scheme, then change single colors until it matches your brand.
Pick a color scheme
The tiles run in this order: Classic (the default), Dynamic, Sand, Zinc, Graphite, Stone, Ocean, Indigo, Violet, Rose, Amber and Sage. Every one has a light and a dark version. The scheme you pick is the theme's default. A section or a block can use a different scheme in its own Colors settings; see Colors and appearance settings.
Classic, Dynamic, Sand, Zinc, Graphite and Stone use your site accent, which is the accent color set in Ghost Admin. Ocean, Indigo, Violet, Rose, Amber and Sage have an accent of their own. Dynamic builds all its colors from your site accent, so its colors cannot be changed one by one.
Change one color
Below the tiles and Custom, the screen lists every color of the scheme in use:
#1F6FEB. The field takes 3, 4, 6 or 8 digits, with or without#.The first time you change a color of a built-in scheme, Fantasma copies the scheme into a custom one named after it, such as "Classic copy", and selects the copy. The built-in scheme stays as it was. Sections and blocks set to that built-in scheme by name keep it; the copy only becomes the theme's default. With Dynamic selected, the screen shows no color list, because Dynamic builds every color from your site accent. To take a change back, press ⌘ Z, or Ctrl+Z on Windows.
A scheme has a light and a dark version of every color. The list shows the version for the color mode selected next to Color scheme, which is also the mode your site uses. To change the dark colors here, click the moon icon, Dark, change them, then click the icon of the mode your site should use. Until you switch back, your site's mode is Dark. To change dark colors without touching the mode, use the scheme's editor in Create your own color scheme. See Choose light, dark or automatic color mode.
Use your Ghost accent color
Site accent in a color's field means the accent color set in Ghost Admin. When it changes in Ghost, the theme follows without a new upload. In the preview, it shows your Ghost site's accent with Connected site preview data, and a demo red with Demo data. To go back to it after entering your own color, open the color picker and click the hex field inside it. In the list that opens, select Site accent. Ghost Admin keeps the accent color in its design settings, under the brand settings.
Hide schemes you do not use
To take a built-in scheme out of the scheme lists in Styles and in section settings, point at its tile, click the three-dot button that appears, and click Hide. Hidden schemes move under Hidden, below the tiles, and sections that use them keep working. To bring one back, click Show in the same menu.
Gradients
Gradients, at the bottom of the screen, holds the gradients sections and blocks can use as a background. See Add a background image, video or gradient.
To build a scheme from scratch with its own name, see Create your own color scheme. Fantasma saves your changes as you make them. Your Ghost site shows them after you publish your theme.