Simple themes with sass 3.3 (works with Fabricator 0.7 but requires changing collate.js to include current index)

collate.js

/**
 * Block iteration
 * @description Repeat a block a given amount of times.
 * @example
 * {{#iterate 20}}
 *   <li>List Item {{@index}}</li>
 * {{/iterate}}
 */
Handlebars.registerHelper('iterate', function (n, block) {
	var accum = '', data;
	for (var i = 0; i < n; ++i) {
		if (block.data){
			data = Handlebars.createFrame(block.data || {});
			data.index = i;
		}
		data.index = i;
		accum += block.fn(i, {data: data});
	}
	return accum;
});

component.html

       {{#iterate 4}}
        <div class="theme-{{@index}}">
            <div class="header">
                header
            </div>
            <div class="footer">
                footer
            </div>
        </div>
        {{/iterate}}

theme.scss

$themes: (
        (
                header: #b06,
                text: #334,
                footer: #666777,
        ),
        (
                header: #333,
                text: #fff,
                footer: #f33,
        ),
        (
                header: #999,
                text: #444,
                footer: #f83,
        ),
        (
                header: #bbb,
                text: #ddd,
                footer: #283,
        )
);

@mixin themed($prop, $val) {
    @each $theme in $themes {
        .theme-#{index($themes, $theme) - 1 } & {
            #{$prop}: map-get($theme, #{$val});
        }
    }
}

.header {
    @include themed('background', 'header');
    @include themed('color', 'text');
}

.footer{
    @include themed('background', 'footer');
}