# 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**](/guides/craft/advanced/translate.md)
* [**Posts per page**](/guides/craft/advanced/posts-per-page.md)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ektothemes.com/guides/craft/advanced/edit-theme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.