Okay. Let's say you have "Template:Character" and you want to have a theme for season 1 that changes the heading background colors to blue. On "Template:Character", you would have something like the following:
<infobox theme-source="season">
<title source="title">
<default>{{PAGENAME}}</default>
</title>
<group>
<header>Family</header>
<data source="mother">
<label>Mother</label>
</data>
<data source="father">
<label>Father</label>
</data>
<data source="siblings">
<label>Siblings</label>
</data>
</group>
<group layout="horizontal">
<data source="attack">
<label>Attack Power</label>
</data>
<data source="defense">
<label>Defense Strength</label>
</data>
<data source="health">
<label>Health Points</label>
</data>
</group>
</infobox>
When used on the page, it would be something like this:
{{Character
|season=1
|mother=Jane Doe
|father=John Doe
|siblings=Dennis Doe
|attack=150
|defense=75
|health=1000
}}
In your site's CSS, you would need something like the following:
.portable-infobox.pi-theme-1 .pi-title,
.portable-infobox.pi-theme-1 .pi-secondary-background {
background-color: blue;
}