Das minimale funktionierende Theme

Die vier Ansichten, in einer einzigen Datei.

Ein Theme fügt sich immer auf dieselbe Weise zusammen, und das ist der Plan dieser ganzen Dokumentation:

ein Theme enthält Ansichten — je ein Bildschirm; eine Ansicht enthält Komponenten — ein Bild, einen Text, eine Liste; eine Komponente trägt Eigenschaften — ihre Position, ihre Größe, ihre Farbe.

Hier ist ein vollständiges, funktionierendes Theme: alle vier Ansichten sind da. Lege einen Ordner mon-theme/ in /recalbox/share/themes/ an, lege dieses theme.xml hinein, und es erscheint in der Theme-Liste.

<?xml version="1.0" encoding="UTF-8"?>
<theme name="Mein Theme" version="1.0" author="Ich"
       recalbox="10.0" compatibility="hdmi,crt" resolutions="hd,fhd">

  <!-- ── 1. DIE SYSTEMLISTE ──────────────────────────────────── -->
  <view name="system">
    <box name="fond" extra="true">
      <pos>0 0</pos><size>1 1</size>
      <color>101820</color><zIndex>1</zIndex>
    </box>

    <carousel name="systemcarousel">
      <type>horizontal</type>
      <pos>0 0.35</pos><size>1 0.3</size>
      <logoSize>0.2 0.12</logoSize>
      <maxLogoCount>5</maxLogoCount>
    </carousel>

    <image name="logo"/>

    <text name="systemInfo">
      <pos>0.5 0.75</pos><origin>0.5 0.5</origin>
      <fontSize>0.03</fontSize><color>8A92A6</color>
      <alignment>center</alignment>
      <backgroundColor>00000000</backgroundColor>
    </text>
  </view>

  <!-- ── 2. DIE SPIELELISTE ──────────────────────────────────── -->
  <view name="detailed">
    <box name="fond" extra="true">
      <pos>0 0</pos><size>1 1</size>
      <color>101820</color><zIndex>1</zIndex>
    </box>

    <textlist name="gamelist">
      <pos>0.05 0.15</pos><size>0.42 0.75</size>
      <primaryColor>C6CBD8</primaryColor>
      <secondaryColor>8A92A6</secondaryColor>
      <selectedColor>101820</selectedColor>
      <selectorColor>4FE3C1</selectorColor>
      <fontSize>0.035</fontSize>
    </textlist>

    <image name="md_image">
      <pos>0.74 0.4</pos><origin>0.5 0.5</origin>
      <maxSize>0.4 0.45</maxSize>
    </image>

    <text name="md_description">
      <pos>0.54 0.68</pos><size>0.4 0.22</size>
      <fontSize>0.024</fontSize><color>A0A8BA</color>
    </text>
  </view>

  <!-- ── 3. DIE MENÜGESTALTUNG ───────────────────────────────── -->
  <view name="menu">
    <menuBackground>
      <color>101820F0</color>
    </menuBackground>
    <menuText>
      <fontSize>0.038</fontSize>
      <color>C6CBD8</color>
      <selectedColor>101820</selectedColor>
      <selectorColor>4FE3C1</selectorColor>
    </menuText>
  </view>

  <!-- ── 4. DER BILDSCHIRMSCHONER ────────────────────────────── -->
  <view name="gameclip">
    <extras>
      <text name="titre">
        <pos>0.06 0.86</pos>
        <text>${game.name}</text>
        <fontSize>0.05</fontSize><color>FFFFFF</color>
      </text>
    </extras>
  </view>
</theme>

Was daran auffallen soll

extra="true" auf dem Hintergrund: Ohne ihn würde er gar nicht angezeigt. Das ist die Regel, die man sich merken muss — erklärt in Die wichtigste Regel;
systemcarousel, logo, gamelist, md_image sind reservierte Namen: dieser Name — nicht der Typ des Tags — verbindet sie mit der Engine. Es gibt etwa dreißig davon, und jede Ansicht hat ihre eigenen: die vollständige Liste steht in Die Ansichten und ihre Komponenten;
${system} und ${game.name} sind Variablen: Recalbox ersetzt sie beim Anzeigen durch den Namen des aktuellen Systems oder des markierten Spiels. Das macht ein Theme lebendig, ohne etwas Besonderes zu schreiben — siehe Variablen verwenden;
die Ansicht menu wird nicht zusammengesetzt: Man platziert dort nichts, man gestaltet, was Recalbox baut;
die Ansicht gameclip ist der Bildschirmschoner — Recalbox spielt dort Spielausschnitte ab, und das Theme fügt kaum mehr hinzu als Informationen über das gezeigte Spiel.

Hier passt alles in eine Datei, damit es auf einen Blick lesbar ist. Sobald das Theme wächst, teilt man es auf — siehe Das Theme aufteilen.