Edit theme

The Sense theme uses a modern development stack to compile and optimize styles and scripts.

For advanced customization, it's recommended that you are familiar with using the command line and code editors like Visual Studio Code or Sublime Text.

You’ll also need a compatible version of Node.js installed to manage project dependencies.

Stack Overview

The theme is built using the following tools:

• Gulp - Task runner for automating build processes (used in Ghost’s official themes)

• Tailwind CSS - Utility-first CSS framework used for styling.

• BrowserSync - Enables live reload and multi-device testing.

• gscan - Ghost’s theme validator.

You can use either npm or yarn to install and manage dependencies.

Available Commands

In the theme folder, run:

npm install    # Install theme dependencies
npm run dev    # Starts development mode with live reload
npm run test   # Runs gscan to check for compatibility issues
npm run zip    # Builds a .zip file of the theme

Development Mode

When running in development mode, two URLs will be generated:

• http://localhost:3000 – Local preview.

• http://<your-ip>:3000 – For multi-device testing on the same network.

These preview URLs proxy your local Ghost site, which must be running in the background.

Use your Ghost site URL (e.g., http://localhost:2368/ghost) to access the admin panel.

Custom Theming

Sense uses a variable-based theming system defined in the assets/css/base.css file. This approach allows the theme to manage fonts, color palettes, and dark mode behavior using CSS custom properties.

By centralizing these values, it becomes easier to:

• Create and adjust color schemes.

• Maintain consistent styling across light and dark modes.

• Extend the theme with new design options.

This system improves flexibility while keeping the codebase clean and easy to maintain.

Custom Components

The theme includes a set of custom Tailwind-based components defined in the assets/css/components.css file.

These components are used throughout the theme to ensure consistency and to simplify the development of more advanced and flexible features.

They include:

• Containers - for layout structure.

• Layout helpers - such as wrappers, spacers, and grid utilities.

• Headings - with preset spacing and font styles.

• Buttons - with consistent appearance across the site.

This setup allows for faster iteration and easier maintenance when building new functionality into the theme.

Custom Cards

Sense uses custom Tailwind styles and local JavaScript to improve the appearance and performance of Ghost cards.

This ensures visual consistency across all devices and removes the need for external scripts.

Custom CSS

The following steps are for adding custom CSS only. If you need to change existing styles or modify layout components, you should edit the corresponding .hbs templates directly — which is the standard approach when using Tailwind CSS.

Follow the steps below to add your own custom styles:

1

Open the Utilities File

• Go to assets/css/utilities.css

2

Add Your CSS

• Write your styles inside the @layer utilities {} block.

/* Example */
@layer utilities {
  .custom-button {
    @apply bg-black text-white px-4 py-2 rounded;
  }
}

3

Use a Separate File (Optional)

• If you prefer, create a new CSS file and import it at the end of assets/css/tailwind.css

This ensures your styles are included in the final build and take advantage of Tailwind’s optimization.

Simple Edits (No Build Required)

For small changes such as:

• Translate

• Posts per page

You don’t need to install dependencies or run Ghost locally. These can be done by directly editing the theme files.