You can define your own variables and reuse them anywhere in your theme: colours, font paths, margins, pieces of text. It is the simplest way to keep a theme consistent and to tweak it from a single place.
Each <variable> goes inside a <variables> block, outside any <view> block. A block may contain as many variables as needed.
<theme>
<variables>
<variable name="main_color" value="4368FF" />
<variable name="font" value="./art/Exo2-Bold.otf" />
<variable name="margin" value="0.05" />
</variables>
<view name="detailed">
<text name="title" extra="true" text="${system}" color="${main_color}" fontPath="${font}" pos="${margin} ${margin}" />
</view>
</theme>
A variable name starts with a letter or _, then accepts letters, digits, _ and .. Dots cannot be doubled (a..b is invalid) nor end the name. An invalid name is ignored, with an error in themes.log.
| Valid | Invalid |
|---|---|
color1 |
1color |
_internal |
my-color |
menu.background |
menu..background |
At the end of every </variables> block, Recalbox "resolves" the values: nested user variables are substituted, then the global contextual variables and those of the displayed system.
<variables>
<variable name="base" value="${root}/art" />
<variable name="background" value="${base}/background-${system.name}.png" />
</variables>
Things to know:
themes.log.<include> that defines it.<variables> blocks are interpreted first of all, even before <include> tags. Variables from a file are therefore usable in that file and in every file it includes.<ERROR: RECURSIVE VARIABLE>).<variable name="background" value="./crt.png" if="crt" />.${game.*} variables are not resolved at declaration time: they depend on the selected game, which changes constantly. A custom variable containing one is therefore only usable where the game context exists, that is in the text="" and path="" attributes of <text>, <scrolltext> and <image> objects. Anywhere else it will never be substituted.
<variables>
<variable name="info_line" value="${game.name} — ${game.developer} (${game.releasedate})" />
</variables>
<view name="detailed">
<text name="info" extra="true" text="${info_line}" pos="0.05 0.9" />
</view>