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.

Example JSON

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"
    }
}

Colour themes

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.

default

headline
sub-headline
accent
background-default
background-muted
background-subtle
highlight
highlight-text

purples

headline
sub-headline
accent
background-default
background-muted
background-subtle
highlight
highlight-text

summer

headline
sub-headline
accent
background-default
background-muted
background-subtle
highlight
highlight-text

neon

headline
sub-headline
accent
background-default
background-muted
background-subtle
highlight
highlight-text

forest

headline
sub-headline
accent
background-default
background-muted
background-subtle
highlight
highlight-text

candy

headline
sub-headline
accent
background-default
background-muted
background-subtle
highlight
highlight-text

corporate

headline
sub-headline
accent
background-default
background-muted
background-subtle
highlight
highlight-text

electric

headline
sub-headline
accent
background-default
background-muted
background-subtle
highlight
highlight-text

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

Heading One

Heading Two

geometric

Heading One

Heading Two

slab

Heading One

Heading Two

grotesque

Heading One

Heading Two

jost

Heading One

Heading Two

looped

Heading One

Heading Two

newspaper

Heading One

Heading Two

Missing something?

Hybiscus is continuously improving and adding new features. If you think we are missing a critical feature, please do not hesitate to contact us and offer your feedback at info@hybiscus.dev