The minimal working theme

The four views, in a single file.

A theme always nests the same way, and it is the outline of this whole documentation:

a theme contains views — one screen each; a view contains components — an image, a text, a list; a component carries properties — its position, its size, its color.

Here is a complete, working theme: all four views are there. Create a folder mon-theme/ in /recalbox/share/themes/, put this theme.xml inside, and it will appear in the list of themes.

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

  <!-- ── 1. THE SYSTEM LIST ──────────────────────────────────── -->
  <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. THE GAME LIST ────────────────────────────────────── -->
  <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. MENU STYLING ─────────────────────────────────────── -->
  <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. THE SCREENSAVER ──────────────────────────────────── -->
  <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>

What to notice in it

extra="true" on the background: without it, it would not show at all. It is the rule to remember, explained in The most important rule;
systemcarousel, logo, gamelist, md_image are reserved names: that name — not the tag type — is what connects them to the engine. There are about thirty of them, and each view has its own: the full list is in The views and their components;
${system} and ${game.name} are variables: Recalbox replaces them at display time, with the name of the current system or of the highlighted game. That is what makes a theme feel alive without writing anything special — see Using variables;
the menu view is not composed: you place nothing there, you style what Recalbox builds;
the gameclip view is the screensaver — Recalbox plays game clips there, and the theme adds little more than information about the game being shown.

Everything fits in one file here, so it can be read at a glance. As soon as the theme grows, you split it up — see Splitting your theme.