How it works

Themes introduce a new tag:

<template:theme/>

A theme is a mixin that may be applied on a page or a template. It defines a j:theme property that references the theme used on the node it was applied to. A picker will automatically present all the themes that are under thetheme directory in the template set (in templates/files/theme).
The tag adds in the HTML header of the page output all the CSS that are found for the referenced node.
A theme is therefore a set of CSS that will overwrite the current CSS in the template-set. Be careful though that you must be using the <template:addResource> for this system to work properly.
Here below we present an example of how to structure a theme directory, including all CSS and image files:

	themes
	└── blueTheme
	   ├── blue.css
	   └── images
	       ├── border.png
	       └── header.png

This directory must then be compressed as a ZIP file, uploaded into the studio in the themes subdirectory in the template-set, and the decompressed.

. [image]
This will have the effect to create a new directory inside the themes directory containing all the theme files.

[image]

The new theme will then be immediately available in the studio.

[image]

The theme will be available for the editors once the template-set has been deployed.

[image]