Using a Page Theme in Front-end

Once a page theme has been defined in the CloudSuite Admin and applied in at least one page, it will be available in Front-end as the variable cms2.theme.

Variable Safety

To ensure that your page won't break when no page theme is available, please use:

{% if cms2 and cms2.theme %}{% endif %}

If we now print the variable cms2.theme, we'll see that the values of the JSON Schema are reflected correctly in Front-end:

<pre>
{
  "should_have_red_background": true
}
</pre>

To use these values in your Front-end theme, it's highly advised to use it as a class on an element:

<main
    className="{{ 'background-red' if cms2 and cms2.theme and cms2.theme.should_have_red_background }}">
</main>