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

# theme.json

> The theme manifest, and how its options reach CSS.

```json theme={null}
{
  "id": "mi-tema",
  "name": "Mi tema",
  "version": "1.0.0",
  "author": "yo",
  "description": "Una línea para la galería",
  "sdk": 1,
  "entry": "index.html",
  "modes": ["desktop", "tv"],
  "preview": "preview.jpg",
  "palette": ["#101010", "#202020", "#ff4d4d", "#ffffff"],
  "host": { "accent": "#ff4d4d", "surface": "#161616", "radius": "10px", "dark": true },
  "sounds": { "preset": "soft" },
  "overlay": { "style": "ejgames" },
  "windowControls": "host",
  "settings": [
    { "key": "accent", "type": "color", "label": "Acento", "default": "#ff4d4d" },
    { "key": "cardSize", "type": "range", "label": "Tamaño", "min": 120, "max": 300, "step": 10, "unit": "px", "default": 180, "group": "Rejilla" },
    { "key": "showClock", "type": "toggle", "label": "Reloj", "default": true },
    { "key": "layout", "type": "select", "label": "Distribución", "default": "grid",
      "options": [{ "value": "grid", "label": "Rejilla" }, { "value": "list", "label": "Lista" }] },
    { "key": "font", "type": "font", "label": "Tipografía", "default": "Segoe UI" },
    { "key": "wallpaper", "type": "image", "label": "Fondo" }
  ]
}
```

| Field | What it is for |
| - | - |
| `id` | letters, numbers, `-` and `_`. Unique. |
| `sdk` | the SDK version the theme uses (today `1`). |
| `modes` | `desktop` and/or `tv` (Big Picture). |
| `preview` | an image for the gallery. Without one, a sketch is drawn from `palette`. |
| `host` | colors of the launcher screens (settings, the editor…) while the theme is active. `dark: false` means light screens. |
| `sounds` | `{"preset": "soft" \| "ps" \| "xbox" \| "switch" \| "retro" \| "none"}` or your own files: `{"move": "sounds/move.wav", "select": …, "back": …, "launch": …, "error": …, "open": …}`. |
| `overlay` | the look of in-game achievement notices: `{"style": "moneda" \| "steam" \| "playstation" \| "xbox" \| "switch" \| "cinema" \| "retro" \| "ejgames"}`. `ejgames` (the quiet default) uses the `host` colors. `moneda` is the house theme's notice. The others imitate their platform and respect the theme's `accent`, `dark` and `palette` settings. The user can change it in **Settings → Overlay**. |
| `features` | views the theme draws itself: `{"explore": true, "guides": true}` (Explore and Downloads; community guides). Without them, the host opens its own. |
| `windowControls` | `"host"`: ejGames draws minimize/maximize/close at the top right (they appear when the mouse passes over). `"theme"`: the theme draws them with `ejg.window.*`. |
| `settings` | options that appear in **Settings → Appearance** for any user, with no code changes. Labels are written in Spanish and translated with the theme's dictionary. |

## Visual editor options → CSS

Each option reaches the theme in two ways:

* **A CSS variable** on `:root`: `--ejg-<key-in-kebab>`. `cardSize` → `--ejg-card-size: 180px`.
  * `color`, `text`, `select`: the value as it is.
  * `range`/`number`: with its `unit`.
  * `toggle`: `1` or `0`.
  * `font`: `"Name", system-ui, sans-serif`.
  * `image`: `url("…")` (the user picks an image or an mp4/webm video).
* **An attribute** on `<html>` for `toggle` and `select`: `data-show-clock="on|off"`, `data-layout="grid"`.

```css theme={null}
:root { --accent: var(--ejg-accent, #ff4d4d); }
.card { width: var(--ejg-card-size, 180px); }
html[data-show-clock="off"] .clock { display: none; }
html[data-layout="list"] .grid { display: block; }
html[data-mode="tv"] body { font-size: 18px; }   /* Big Picture */
```

And in JavaScript: `ejg.settings.cardSize`. If an option needs a redraw, listen with `ejg.on("settings", …)`.

Each profile can also add **extra CSS** to any theme (Settings → Appearance), and it is applied last.


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