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

Color 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
paragraph
background-default
background-muted
background-subtle
highlight
highlight-text

purples

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

summer

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

neon

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

forest

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

candy

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

corporate

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

electric

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

ember

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

royal

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

twilight

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

crimson

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

key-lime

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

surfboard

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

Typography themes

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.

Preset typography themes

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

default

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

geometric

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

slab

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

grotesque

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

jost

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

looped

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

newspaper

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

albert-barlow

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

abril-lato

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

fjalla-source

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

raleway-lora

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

bebas-montserrat

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

jakarta

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

ibm-plex

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

outfit

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

prompt-inter

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

urbanist

Heading One

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Google fonts

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.

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 support@hybiscus.dev