Le thème minimal qui fonctionne

Les quatre vues, dans un seul fichier.

Un thème s’emboîte toujours de la même façon, et c’est le plan de toute cette documentation :

un thème contient des vues — un écran chacune ; une vue contient des composants — une image, un texte, une liste ; un composant porte des propriétés — sa position, sa taille, sa couleur.

Voici un thème complet et fonctionnel : les quatre vues y sont. Créez un dossier mon-theme/ dans /recalbox/share/themes/, mettez-y ce theme.xml, il apparaîtra dans la liste des thèmes.

<?xml version="1.0" encoding="UTF-8"?>
<theme name="Mon Thème" version="1.0" author="Moi"
       recalbox="10.0" compatibility="hdmi,crt" resolutions="hd,fhd">

  <!-- ── 1. LA LISTE DES SYSTÈMES ────────────────────────────── -->
  <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. LA LISTE DES JEUX ────────────────────────────────── -->
  <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. L’HABILLAGE DES MENUS ────────────────────────────── -->
  <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. L’ÉCRAN DE VEILLE ────────────────────────────────── -->
  <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>

Ce qu’il faut y remarquer

extra="true" sur le fond : sans lui, il ne s’afficherait pas. C’est la règle à retenir, expliquée dans La règle la plus importante ;
systemcarousel, logo, gamelist, md_image sont des noms réservés : c’est ce nom-là — pas le type de la balise — qui les relie au moteur. Il y en a une trentaine, et chaque vue a les siens : la liste complète est dans Les vues et leurs composants ;
${system} et ${game.name} sont des variables : Recalbox les remplace au moment d’afficher, par le nom du système en cours ou du jeu survolé. C’est ce qui rend un thème vivant sans rien écrire de particulier — voir Se servir des variables ;
la vue menu ne se compose pas : on n’y pose rien, on habille ce que Recalbox construit ;
la vue gameclip, c’est l’écran de veille — Recalbox y enchaîne des extraits de jeux, et le thème n’y ajoute guère que des informations sur le jeu montré.

Tout tient dans un seul fichier ici, pour que ce soit lisible d’un coup d’œil. Dès que le thème grossit, on le découpe — voir Découper son thème.