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

# Options without code, and Big Picture

> Settings anyone can edit from Appearance, and TV mode.

## Options in Settings → Appearance

Anyone can customize your theme without opening a file if you declare
**`settings`** in `theme.json`. This is the example's complete `theme.json`:

```json theme={null}
{
  "id": "ejemplo",
  "name": "Mi primer tema",
  "version": "1.0.0",
  "author": "Tu nombre",
  "description": "Rejilla de carátulas con ficha de juego (el tema de la guía)",
  "sdk": 1,
  "entry": "index.html",
  "modes": ["desktop", "tv"],
  "palette": ["#12141b", "#1c1f29", "#7c5cff", "#eceef4"],
  "host": { "accent": "#7c5cff", "surface": "#161922", "radius": "10px", "dark": true },
  "sounds": { "preset": "soft" },
  "windowControls": "host",
  "settings": [
    { "key": "accent", "type": "color", "label": "Color de acento", "default": "#7c5cff" },
    { "key": "wallpaper", "type": "image", "label": "Imagen de fondo" },
    { "key": "cardSize", "type": "range", "label": "Tamaño de las carátulas", "min": 120, "max": 260, "step": 10, "unit": "px", "default": 160, "group": "Rejilla" },
    { "key": "showTitles", "type": "toggle", "label": "Nombre bajo la carátula", "default": true, "group": "Rejilla" },
    { "key": "order", "type": "select", "label": "Orden", "default": "title", "group": "Rejilla", "options": [
      { "value": "title", "label": "Nombre" },
      { "value": "recent", "label": "Jugado recientemente" },
      { "value": "playtime", "label": "Horas jugadas" }
    ] }
  ]
}
```

(With developer mode, `theme.json` changes apply on save. Otherwise, press F5.)

In **Settings → Appearance** two blocks will appear, "Mi primer tema · General"
and "Mi primer tema · Rejilla" (the second name comes from the `group` field),
with a **Reset** button. ejGames adds the **Navigation sounds** picker on its
own ([step 8](https://ej3mplo.mintlify.site/guia/sonidos-colores.md)) and an **extra CSS** box each profile can
use to retouch your theme.

The labels above are Spanish on purpose: they are the source text, and the
dictionary translates them. See [Languages](https://ej3mplo.mintlify.site/referencia/idiomas.md).

Each option reaches your page **on its own**, in two ways:

1. A **CSS variable** on `<html>`: `--ejg-` plus the key in lowercase with
   hyphens (`cardSize` → `--ejg-card-size`).
2. For `toggle` and `select`, also a **`data-…` attribute** on `<html>`.

| `type` | Control | CSS variable | Attribute |
| - | - | - | - |
| `color` | color picker | `--ejg-accent: #7c5cff` | — |
| `range` / `number` | slider (`min`, `max`, `step`, `unit`) | `--ejg-card-size: 160px` (with its `unit`) | — |
| `toggle` | switch | `--ejg-show-titles: 1` or `0` | `data-show-titles="on"` / `"off"` |
| `select` | list (`options`) | `--ejg-order: title` | `data-order="title"` |
| `font` | Windows typefaces | `--ejg-…: "Segoe UI", system-ui, sans-serif` | — |
| `image` | an image or video the user picks | `--ejg-wallpaper: url("…")` | — |
| `text` | text box | the text as it is | — |

An option with no value (like `wallpaper` until something is chosen) does **not**
create the variable, so always use a fallback in `var()`. In the example CSS:

```css theme={null}
:root {
  --acento: var(--ejg-accent, #7c5cff);
  --carta: var(--ejg-card-size, 160px);
}
.rejilla { grid-template-columns: repeat(auto-fill, minmax(var(--carta), 1fr)); }
html[data-show-titles="off"] .nombre { display: none; }

/* Background image: behind everything, and dimmed. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--ejg-wallpaper, none) center / cover no-repeat;
  opacity: 0.3;
}
```

(If you have followed the guide, replace `--acento: #7c5cff;` with the line
above and put `var(--carta)` where the grid had `160px`.)

When you have to read the option **from JavaScript** (here, the sort order), it
is on **`ejg.settings`**, and **`ejg.on("settings", …)`** fires when the user
changes it:

```js theme={null}
function juegos() {
  // visible(): no hidden or missing games. The order is a theme option.
  return sort(visible(ejg.library.all), ejg.settings.order);
}

ejg.on("settings", repintar); // "Order" is applied in JavaScript
```

> [!NOTE]
>
> The `image` type also accepts **videos**, mp4/webm. A video cannot be a CSS
> `background`. If you want to allow it, check it on `ejg.settings` and paint a
> `<video muted loop autoplay>` (the Steam theme does it this way).

## Big Picture

Big Picture is the "TV" mode: fullscreen, and built for a controller. You enter
it from the quick menu (**Ctrl + K**, or the controller's Guide button → **Big
Picture**) or from **Settings → System**. On entering, ejGames:

* sets **`data-mode="tv"`** on your theme's `<html>` (`ejg.mode` is `"tv"` and
  `ejg.on("mode", …)` reports the change);
* hides its window buttons;
* and, if you press **Back** with nothing open (your `back` returned `false`),
  opens the quick menu.

CSS is enough to adapt: larger type and covers, and hide what a controller does
not use.

```css theme={null}
html[data-mode="tv"] { --carta: calc(var(--ejg-card-size, 160px) * 1.3); }
html[data-mode="tv"] body { font-size: 19px; }
html[data-mode="tv"] .acciones { display: none; }
```

The `"modes": ["desktop", "tv"]` field in `theme.json` is informational. Every
theme receives `data-mode="tv"` in Big Picture, so design for both.


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