> ## Documentation Index
> Fetch the complete documentation index at: https://ej3mplo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Build themes

> A theme is an ordinary web page that draws your library however you want.

A theme is a **complete web page** (HTML + CSS + JavaScript) that draws your library however you want. Nothing
needs compiling: you save, and it reloads. The house theme (Moneda) and the platform themes in the repository's
`themes/` folder (Steam, PS5, Xbox, Switch, Cinema and Retro, switched off in the app for now) are built with exactly
what this guide explains. Use them as examples.

> [card] [Step-by-step guide](https://ej3mplo.mintlify.site/guia.md)
>
> Your first theme from scratch: a cover grid, a controller, a game page and options that need no code.

> [card] [Reference](https://ej3mplo.mintlify.site/referencia/sdk.md)
>
> `theme.json`, the full `window.ejg` SDK (including Explore and Downloads) and the utility kit.

## Start in 1 minute

**1. Pick a base**

**Settings → Appearance** → the theme closest to what you want.

**2. Duplicate it**

Press **Duplicate to edit**. It is copied to your themes folder (`%APPDATA%\ejGames\themes\<id>-custom`) and
becomes the selected theme.

**3. Open its folder**

Turn on **Developer mode** (same screen) and press **Open theme folder**.

**4. Edit**

Change `style.css` or `main.js` in your editor. On save, the theme reloads by itself.

`F5` reloads the theme by hand. If the theme hangs (it does not answer within a few seconds), ejGames falls back to
the house theme, Moneda. A JavaScript error does not switch themes: it leaves the theme blank and, with developer
mode on, shows up as a notice. Hold **Shift** while opening ejGames to start in safe mode.

The gallery reads the themes folder again each time you open Appearance, and `theme.json` changes apply when the
theme reloads. You do not need to restart.

## Layout

```
my-theme/
  theme.json      manifest (required)
  index.html      entry (the SDK is injected into the <head> for you)
  style.css
  main.js         ES module
  fonts/ sounds/ img/ …  whatever you need
```

* [`theme.json`](https://ej3mplo.mintlify.site/referencia/theme-json) names the theme, lists the options it offers in Appearance, and sets the
  colors the launcher screens use.
* [`window.ejg`](https://ej3mplo.mintlify.site/referencia/sdk) is the SDK: the library, launching games, the controller, achievements, downloads…
* The [kit](https://ej3mplo.mintlify.site/referencia/kit.md) (`/_sdk/kit/`) has what almost every theme needs: controller navigation, art that fits,
  formatters, trailers.

The finished example from the guide is in
[`examples/ejemplo-tema/`](https://github.com/ej3mpl0/ejGames/tree/main/examples/ejemplo-tema).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.