# 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](https://code.visualstudio.com/) or [Sublime Text](https://www.sublimetext.com/).

You’ll also need a compatible version of [Node.js](https://nodejs.org/) installed to manage project dependencies.

### Stack Overview

The theme is built using the following tools:

* [**Gulp**](https://gulpjs.com/) - Task runner for automating build processes *(used in Ghost’s official themes)*
* [**Tailwind CSS**](https://tailwindcss.com/) - Utility-first CSS framework used for styling.
* [**BrowserSync**](https://browsersync.io/) - Enables live reload and multi-device testing.
* [**gscan**](https://github.com/TryGhost/gscan) - Ghost’s theme validator.

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

### Available Commands

In the theme folder, run:

```bash
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**.&#x20;

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:

{% stepper %}
{% step %}

#### Open the Utilities File

* Go to `assets/css/utilities.css`
  {% endstep %}

{% step %}

#### Add Your CSS

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

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

{% endstep %}

{% step %}

#### Use a Separate File (Optional)

* If you prefer, create a new CSS file and import it at the end of `assets/css/tailwind.css`
  {% endstep %}
  {% endstepper %}

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](https://docs.ektothemes.com/guides/sense/advanced/translate)
* [Posts per page](https://docs.ektothemes.com/guides/sense/advanced/posts-per-page)

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