theme.json

The theme manifest, and how its options reach CSS.

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

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