Theme

Style to be applied per item type as CSS key-value pairs.

Item	Description
page	Style to be applied on the page.
content	Style to be applied to the content of the page.
title	Style to be applied on title items.
subtitle	Style to be applied on subtitle items.
question	Style to be applied on question items.
p	Style to be applied on p items.
code	Style to be applied on code items.
image	Style to be applied on image items.
line	Style to be applied on line items.
space	Style to be applied on space items.
embed	Style to be applied on embed items.
link	Style to be applied on link items. You can use pseudo classes like :hover.
button	Style to be applied on button items. You can use pseudo classes like :hover and :disabled.
progress	Style to be applied on the progress bar of the page.
alert	Style to be applied on the alert box of the page.

font-family

You can use a system font directly or prefix the font with 'google:' to use a Google font.

Forms

Item	Description
form.inputs	Style to be applied to the container of the input item.
form .input	Style to be applied on input items.
form .textarea	Style to be applied on textlong items.
form .checks	Style to be applied on check items.
form .radios	Style to be applied on radio items.
form .option	Style to be applied to the options of check and radio items. You can use pseudo classes like :hover.
form .option_container	Style to be applied to the container of the option.

For pages with single elements (input_submit = true), you can use form_submit instead of form to style the items. See more on Submitting forms.

Example

{
    "page": {
        "font-family": "google:Lato",
        "font-size": "20px",
        "color": "#4b3f32",
        "background-color": "#f5f1ed"
    },
    "content": {
        "align-items": "center",
        "text-align": "center",
        "justify-content": "center"
    },
    "title": {
        "color" : "#000000"
    },
    "subtitle": {
        "color" : "#000000"
    },
    "question": {
        "color" : "#000000"
    },
    "button": {
        "background-color": "#f1574b",
        "color": "#ffffff",
        "border-radius" : "100px",
        "border-width" : "3px"
    },
    "button:hover": {
        "background-color": "#ffffff",
        "color": "#f1574b"
    },
    "link": {
        "color": "#f1574b"
    },
    "form_submit.inputs": {
        "background-color": "#fff"
    },
    "form_submit .input": {
        "color": "#000"
    },
    "form .option:hover": {
        "color": "#3e306e"
    },
    "form_submit .option:hover": {
        "color": "#3e306e"
    }
}