Customising themes

Hybiscus uses named color variables to set the colors across all the components in a report. To customize the color theme, you can override the theme color variables using the config.override_color_theme key. You can now customise the variables for any theme, not just the default theme.

These variables can also be referenced by various components, to customise their appearance. A centralised list of color theme variables ensures consistency across your report, making the reports look more professional and aesthetically pleasing.

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

The list of color theme variables are listed below. You can see examples of them here.

An example of customising these color variables is shown below. You can use hex values, or named CSS colors e.g. yellowgreen.

{
    "type": "Report",
    "options": {
        "report_title": "Report title"
    },
    "config": {
        "color_theme": "purples",
        "override_color_theme": {
            "accent": "#FB76E8",
            "background-muted": "#ECECEC",
        }
    },
    ...,
}

You can also define 3 custom color theme variables, which can be referenced throughout in the options of different components of your report JSON.

If the Section component has higlighted set to true, the color variables used by the component and it's children are assigned different values, which can be defined inside the highlighted key.

This applies for not only the Section component itself, but also it's children, such as the Card component.

{
    "type": "Report",
    "options": {
        "report_title": "Report title"
    },
    "config": {
        "color_theme": "default",
        "override_color_theme": {
            "accent": "#FB76E8",
            "background-muted": "#ECECEC",
            "highlighted": {
                "background-default": "green",
                "highlight": "yellow",
                "highlight-text": "black"
            }
        }
    },
    ...,
}

In the above example, we're overriding highlighted.background-default which means the background of the Section will be green, whilst any Card component inside the section with highlighted set to true, will have a yellow background.