> ## 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.

# Your first theme, step by step

> A small but complete theme from scratch: grid, controller, game page and options.

This guide is for you if you know some HTML, CSS and JavaScript and want to build a
theme **from scratch**, without starting from a built-in one. Together we will build
a theme that is small but complete:

* a grid of your games' covers,
* used with mouse, keyboard or controller,
* with a page for each game (description, Play/Install, favorite),
* with options anyone can change in **Settings → Appearance** without touching code,
* and that adapts to **Big Picture**.

The finished result is in [`examples/ejemplo-tema/`](https://github.com/ej3mpl0/ejGames/tree/main/examples/ejemplo-tema): four files you can copy as they are. This guide is practical. To see **everything** the SDK offers, use the [reference](https://ej3mplo.mintlify.site/referencia/sdk.md).

> [!NOTE]
>
> The example writes its interface in Spanish. That Spanish text is the translation key: English, and the other languages, come from a dictionary, with no code changes. See [Languages](https://ej3mplo.mintlify.site/referencia/idiomas.md).

## Before you start: what a theme is

A theme is an **ordinary web page** that ejGames opens fullscreen. It runs in a
closed box (an isolated *iframe*): no internet, and no access to the disk. Everything
it needs, it asks ejGames for through an object that appears on your page on its own,
**`window.ejg`** (the SDK): the list of games, notices when something changes,
launching a game, opening settings…

The launcher's own screens (settings, search, the game editor, the quick menu,
profiles) are drawn by ejGames **on top of** your theme. You only take care of
showing the library your way.

## Chapters

> [card] [1. Where the theme goes, and how to turn it on](https://ej3mplo.mintlify.site/guia/carpeta.md)
>
> The theme folder, the gallery and developer mode.

> [card] [2. The smallest theme.json](https://ej3mplo.mintlify.site/guia/theme-json.md)
>
> The manifest that makes ejGames recognize your theme.

> [card] [3. index.html and the first main.js](https://ej3mplo.mintlify.site/guia/primer-main.md)
>
> The page, a little style, and the first data from the SDK.

> [card] [4. Cover grid](https://ej3mplo.mintlify.site/guia/rejilla.md)
>
> Draw the library fast, even with thousands of games.

> [card] [5. Controller and keyboard](https://ej3mplo.mintlify.site/guia/mando.md)
>
> Spatial navigation with the kit, and the hint bar.

> [card] [6. The game page](https://ej3mplo.mintlify.site/guia/ficha.md)
>
> Description, Play or Install, favorite, and back.

> [card] [7. Options without code, and Big Picture](https://ej3mplo.mintlify.site/guia/opciones.md)
>
> Settings anyone can edit from Appearance, and TV mode.

> [card] [8. Sounds and launcher colors](https://ej3mplo.mintlify.site/guia/sonidos-colores.md)
>
> Sounds, host screen colors, achievement notices and window buttons.

> [card] [9. Explore and downloads](https://ej3mplo.mintlify.site/guia/explorar.md)
>
> Open the store, show what is downloading, or draw your own store.

> [card] [10. Debugging and common mistakes](https://ej3mplo.mintlify.site/guia/depurar.md)
>
> See the errors, the theme's limits, and the most common failures.

> [card] [11. Export and share](https://ej3mplo.mintlify.site/guia/compartir.md)
>
> Pack the theme into a .ejtheme, and what to do next.


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