Every color scheme has a light and a dark version. The color mode decides which one your site shows: always light, always dark, or whichever each visitor's device asks for.
Set the color mode
The three icons next to Color scheme set the mode:
Icon
Mode
What visitors see
Monitor
System
Light or dark, following the setting of the visitor's phone or computer
Sun
Light
The light colors. This is the default.
Moon
Dark
The dark colors
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.
Next to Color scheme, click the monitor, sun or moon icon. The canvas switches to that mode. With System, it follows your own computer's setting.
1
Color mode icons
To look at the other mode without changing the setting, use Preview color scheme in the toolbar under the canvas. See Preview your theme.
Let visitors switch
Add a Dark Mode Toggle block where visitors can reach it, such as in your header. It shows a sun or moon icon that opens a small menu with Light, Dark and System. A visitor's choice is kept in their browser, so the site opens in it on their next visit. The theme sets the mode before the page draws, so a dark page does not flash light first. Visitors who never choose see the mode you set in Styles.
Add it like any other block. In the block picker, search for "Dark Mode Toggle". If you browse instead of searching, it is in the Forms group. See Add blocks to a section. Its one setting, Menu opens, opens the menu Below or Above the icon. For the full block, see Dark Mode Toggle.
Keep one section light or dark
A section or a block can stay in one mode whatever the site uses, such as a dark footer on a light site. Select it on the canvas, and in the right sidebar under Colors, open Color Scheme. Beside Theme in the list, click the sun for Light or the moon for Dark. Inherit, the default, follows the site. See Colors and appearance settings.
Show a different logo in dark mode
A dark logo can disappear on a dark background. When your theme shows the site logo, it adds a "Dark mode logo" image setting to your theme's settings in Ghost Admin. Upload a light version of your logo there. The site shows it wherever the page or the section around the logo is dark, including after a visitor switches with the toggle, and your usual Ghost logo everywhere else.
Check both versions of your colors
Every built-in scheme comes with dark colors. Before you choose System or Dark, or add a toggle, check them. The color list on the Colors screen shows the version for the mode selected next to Color scheme. Click the moon icon, Dark, to see and change the dark colors, then click the icon of the mode your site should use. In a custom scheme's editor, the sun and moon icons switch the version you edit without changing the site's mode. See Change your colors and Create your own color scheme.
Fantasma saves your changes as you make them. Your Ghost site shows them after you publish your theme.
Every color scheme has a light and a dark version. The color mode decides which one your site shows: always light, always dark, or whichever each visitor's device asks for.
Set the color mode
The three icons next to Color scheme set the mode:
To look at the other mode without changing the setting, use Preview color scheme in the toolbar under the canvas. See Preview your theme.
Let visitors switch
Add a Dark Mode Toggle block where visitors can reach it, such as in your header. It shows a sun or moon icon that opens a small menu with Light, Dark and System. A visitor's choice is kept in their browser, so the site opens in it on their next visit. The theme sets the mode before the page draws, so a dark page does not flash light first. Visitors who never choose see the mode you set in Styles.
Add it like any other block. In the block picker, search for "Dark Mode Toggle". If you browse instead of searching, it is in the Forms group. See Add blocks to a section. Its one setting, Menu opens, opens the menu Below or Above the icon. For the full block, see Dark Mode Toggle.
Keep one section light or dark
A section or a block can stay in one mode whatever the site uses, such as a dark footer on a light site. Select it on the canvas, and in the right sidebar under Colors, open Color Scheme. Beside Theme in the list, click the sun for Light or the moon for Dark. Inherit, the default, follows the site. See Colors and appearance settings.
Show a different logo in dark mode
A dark logo can disappear on a dark background. When your theme shows the site logo, it adds a "Dark mode logo" image setting to your theme's settings in Ghost Admin. Upload a light version of your logo there. The site shows it wherever the page or the section around the logo is dark, including after a visitor switches with the toggle, and your usual Ghost logo everywhere else.
Check both versions of your colors
Every built-in scheme comes with dark colors. Before you choose System or Dark, or add a toggle, check them. The color list on the Colors screen shows the version for the mode selected next to Color scheme. Click the moon icon, Dark, to see and change the dark colors, then click the icon of the mode your site should use. In a custom scheme's editor, the sun and moon icons switch the version you edit without changing the site's mode. See Change your colors and Create your own color scheme.
Fantasma saves your changes as you make them. Your Ghost site shows them after you publish your theme.