Skip to main content

Site wide

This section details how to customize site wide settings through the Ghost theme settings' Site wide tab. You can modify options like the secondary background color, use of tag accent color, and the header behavior.

To customize site wide options, you need to:

  1. Navigate to 'Design & branding' settings in the Ghost Admin.
  2. Locate the "Site wide" tab on the right-hand side of the interface.

Enable dark mode

The theme includes an integrated color scheme switcher, providing you with the flexibility to activate or deactivate the color theme selector for your website as desired.

To enable/disable the dark mode option, you need to:

  1. Navigate to the field labeled "Enable dark mode" and toggle on or off the setting.
  2. To apply the modifications you've made, click the "Save" button.

Note: The theme automatically detects the preferred color scheme from the user's browser settings and switches to the corresponding color theme during their initial visit.

Enabling dark mode provides an additional option to upload a logo specifically designed for the dark color scheme.

Important: Ensure you upload a version of your logo that is clearly visible on a dark background, typically one that is light-colored.

To upload a logo for the dark mode, you need to:

  1. Navigate to the field labeled "Dark mode logo" and click on "Upload image" button.
  2. Select the logo image from the dialog box.
  3. To apply the modifications you've made, click the "Save" button.

Secondary background color

To customize the appearance of your site, you can choose a different background color for the header, footer and hero sections of the home, author, tag, post and page layouts.

  1. Navigate to the field labeled "Secondary background color" and select the color you want for the secondary background.
  2. To apply the modifications you've made, click the "Save" button.

Note: In dark mode, the secondary background color will automatically adjust to a suitable dark shade.

💡 Tips
  • Try to use a light shade of your brand color to maximize the visibility

    You can generate the color shades on this website.

  • The secondary background color will be replaced with the tag accent color (where tag accent color is available), if the Use tag accent color option (explained below) is enabled.
  • In dark mode, the secondary background color will automatically adjust to a suitable dark shade.

Use tag accent color

If you turn on the Use tag accent color option, the tag color (if it exists) will take the place of the secondary background color. The primary tag's color will be used when there are more than one tags.

  1. Navigate to the field labeled "Use tag accent color" and toggle on or off the setting.
  2. To apply the modifications you've made, click the "Save" button.

Fixed header

When you scroll down the page, the Fixed header option will keep the header in place at the top of the screen.

  1. Navigate to the field labeled "Fixed header" and toggle on or off the setting.
  2. To apply the modifications you've made, click the "Save" button.

Contact form endpoint

If you want your readers to contact you directly, you can add a contact page to your website. This theme includes built-in Formspree.io integration for easy setup.

  • Please refer to this guide for setting up a fully functional contact page.
Back to top