# Edit theme

This theme uses a modern development stack to compile and optimize styles and scripts. For advanced customization, you should be comfortable using the command line, a code editor (such as [Visual Studio Code](https://code.visualstudio.com/) or [Cursor](https://cursor.com/)), and have a compatible version of [Node.js](https://nodejs.org/) installed.

### Stack overview

This theme is built using the following tools:

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

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

### Available commands

Inside the theme folder, run:

```shellscript
npm install     # Install all dependencies  
npm run dev     # Start development mode with live reload  
npm run test    # Run gscan to check for compatibility issues  
npm run zip     # Build a .zip file of the theme  
```

### Development mode

When running **"npm run dev"**, two preview URLs will be available:

* `http://localhost:3000` – Local preview.
* `http://<your-ip>:3000` – Multi-device preview on the same network.

These URLs proxy your local Ghost site, which must be running in the background.&#x20;

Use your Ghost Admin URL (e.g., `http://localhost:2368/ghost`) to access the dashboard.

### Custom theming

This theme uses a variable-based system defined in `assets/css/ekto.css`.\
It controls:

* **Color palettes**
* **Fonts**
* **Dark mode behavior**

By centralizing these values, it becomes easier to:

* Adjust or create new color schemes
* Maintain consistent styling across light and dark modes
* Extend the theme with new design variations

This approach keeps the code clean, flexible, and maintainable.

### Custom utilities

The theme includes Tailwind-based utilities defined in `assets/css/utilities.css`, used throughout the layout for visual consistency.

These utilities include:

* **Layout containers**
* **Wrappers, spacers, and grid helpers**
* **Heading presets**
* **Button styles**

This setup makes building new features faster and more consistent.

### Custom cards

This theme uses custom Tailwind styles `assets/css/lib/cards.css` and local JavaScript `assets/js/lib/cards.js` to enhance Ghost cards. This improves appearance, maintains consistency, and removes the need for external scripts.

### Custom CSS

If you want to add your own CSS without modifying core theme files, you can create a separate stylesheet and include it in the build.

#### Step-by-step:

{% stepper %}
{% step %}
Inside `assets/css/`, create a new CSS file (for example: `custom.css`).
{% endstep %}

{% step %}
Add your custom styles inside this file.

```css
/* Example */
.custom-button {
    background-color: #000;
    color: #fff;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    border-radius: 0.5rem;
}
```

{% endstep %}

{% step %}
At the end of `assets/css/tailwind.css`, import your new file:

```css
/* Example */
@import "./custom.css";
```

{% endstep %}
{% endstepper %}

This ensures your styles are included in the final build and optimized together with the rest of the theme.

### Simple edits (no build required)

For small adjustments such as:

* [**Translate**](https://docs.ektothemes.com/guides/haas/advanced/translate)
* [**Posts per page**](https://docs.ektothemes.com/guides/haas/advanced/posts-per-page)

You do **not** need to install dependencies or run Ghost locally. These edits can be made directly in the theme files.