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:

{
  "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) 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.

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:

: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:

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

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.

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.