Skip to main content

Basic Setup

Settings & Customization

Theme Settings

You can customize the theme using the custom settings found in Settings > Design & branding > Theme:

Dark theme logo:
If your normal logo doesn't look good on dark mode, you can upload a new one using this settings. This logo will only be displayed on dark mode. Please make sure both the light mode logo and the dark mode logo have the same size.

Dark theme accent color:
If your site's accent color doesn't look good on dark mode, you can adjust it using this settings. This new color will only be used on dark mode. Black (#000000) is a placeholder and is ignored.

Default color scheme:
Choose your website's default color scheme: Light, Dark, or System.

Grayscale:
Choose different shades of gray and change the general tone of your website (cool, warm, neutral)

Tone:
Change the general tone of your website

Body font:
By default the theme uses fonts available on your system. You can use this settings to choose a different body font from a predefined list of font families. Fonts are loaded from Google fonts, if you have privacy concerns please keep using the default system fonts.

Headings font:
You can use this settings to choose a different headings font from a predefined list of font families. Fonts are loaded from Google fonts, if you have privacy concerns please keep using the default system fonts.

Footer description:
Custom description displayed on the site footer. Defaults to the global site description.

Footer signup title:
Change the signup title text that's displayed on the site footer.

Footer signup description:
Change the signup description text that's displayed on the site footer (you can add <br> to the text to force a new line).

Footer copyright:
Change the copyright text that's displayed on the site footer.

Ghost only supports Facebook and X social media links, so we had to come up with an easy no-code way of adding more links.

As an example, let's start by configuring Discord.

Open Ghost admin and go to Tags > Internal Tags, then click on "New tag". Name the tag #social-discord, the slug should be set automatically to hash-social-discord, all social media tags should start with #social- (e.g. #social-youtube, #social-telegram, ...).

Next, expand the "Meta data" section and add your Discord URL to the "Canonical URL" field.

Finally, add this tag to any public page to activate it (e.g. Contact or About page).

Repeat the process for all your social media links. We support Github, Discord, LinkedIn, Youtube, Telegram, Instagram, Mastodon, TikTok, and X. Facebook and Twitter (bird icon) are already supported natively by Ghost and are found in Settings > General > Social accounts.

To create a dropdown, add + to the beginning of a navigation item (the URL for this item is ignored), then follow it with items that start with - (make sure there is no space before the + and - characters).

You can create multiple dropdowns, each dropdown can include up to 10 inner items.

Similarly to the menu dropdowns, you can create a column in the footer by adding + to the beginning of a navigation item, this will be the column name (the URL for this item is ignored), then follow it with items that start with - (make sure there is no space before the + and - characters).

Theme development

If you want to extend the theme even further, the theme comes with a developer-friendly setup based on multiple Gulp tasks.

First, you'll need Node installed globally. Then, follow the official guide on how to install Ghost locally.

After Ghost is installed, make sure to copy the theme folder to <ghost>/content/themes, you can then start using the following commands:

Install dependencies

From the theme's root directory, run the following command to install dependencies:

npm install

Start development server

The following command starts a development server with Livereload enabled

npm run dev

Compile CSS

We use PostCSS and TailwindCSS (v4) to manage our CSS. All CSS files in /assets/css/ and imported in /assets/css/main.css, will be compiled to /assets/built/main.min.css automatically, in addition to any TailwindCSS utility class used in .hbs or .js files.

npm run css

Compile Javascript

Javascript files in /assets/js/ will be compiled to /assets/built/main.min.js automatically.

npm run js

Build all assets

To compile all assets, run the following command:

npm run build

Test theme

To test the theme compatibility using Gscan, run the following command:

npm run test

Create ZIP file

The zip Gulp task packages the theme files into dist/<theme-name>.zip, which you can then upload to your site.

npm run zip