Themes

Hybiscus reports can be themed using a colour theme and/or a typography theme. Hybiscus has a number of themes you can choose from, and soon support will be available for defining your own custom themes via the JSON definition.

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

Example JSON

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

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

Colour themes

Below are the list of supported colour themes:

• default

• purples

• summer

• neon

• forest

• candy

• corporate

• electric

Custom colour theme

It is also possible to override the colour theme with your own custom colours. To do so, you must first choose the default colour theme, then add an additional key override_colour_theme that specifies an object with colour overrides. You can choose to override just one or all of the colours in the palette. For components that support an option for being highlighted, you can specify the colours in a separate object assigned to the highlighted key (which is also optional).

Customising the colour theme is only supported with a paid plan. See here for more details.

List of colours / theme variables that can be overriden:

• headline
• sub-headline
• accent
• light-background
• highlight
• highlight-text
• background
• background-faded

For the highlighted key, only the following colours / theme variables can be overriden:

• light-background
• background
• background-faded

Below is an example of the JSON definition (Report.config):

{
    "type": "Report",
    "options": {...},
    "config": {
        "colour_theme": "default",
        "override_colour_theme": {
            "accent": "#FB76E8",
            "background": "#ECECEC",
            "highlighted": {
                "background": "#F3F3F3"
            }
        }
    },
    ...,
}

Typography themes

Below are the list of supported typography themes. The typography themes only apply to the heading texts. When specifying the theme in the typography_theme key, write the name in lowercase.

• Default
• Geometric
• Slab
• Grotesque
• Jost
• Looped
• Newspaper