Themes

Hybiscus reports can be themed using a color theme and typography theme. There are a number of themes you can choose from, and each of these can be customised as well.

Themes are selected by setting values in the config key at top level of the report JSON definition, and affect all components in the report.

Below is an example of how you can set the color and typography theme:

{
    "type": "Report",
    "options": {
        "report_title": "Analytics report"
    },
    "config": {
        "color_theme": "forest",
        "typography_theme": "newspaper"
    }
}

The list of available color themes are below. Please note, when setting the value inside the JSON definition, the value must be lowercase e.g. corporate.

To customise the fonts, you can either choose from a selection of preset typography themes that target the heading and paragraph fonts, or choose your own from Google Fonts.

To use a preset theme from below, specify its name in the typography_theme key, writing it in lowercase.

To use fonts from Google Fonts, you'll need to first set config.typography_theme to google-fonts, and then configure your fonts in the config.google_fonts key. For a list of all the Google Fonts options, see here.

An example is shown below:

{
    "type": "Report",
    "options": {
        "report_title": "Analytics report"
    },
    "config": {
        "color_theme": "forest",
        "typography_theme": "google-fonts",
        "google_fonts": {
            "headings": {
                "family": "IBM Plex Sans",
                "weight": "300"
            },
            "paragraph": {
                "family": "IBM Plex Sans",
                "weight": "100"
            },
        }
    },
    ...
}

You can choose to customise the family and weight for the headings and paragraph text individually. The default family for headings and paragraph text is Inter, with weights of 700 and 300, respectively.