getting started
premium components
deprecated components
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 schema.
Themes are used by setting values in the config
key at top level of the report
schema, and affect all components in the report.
Example schema
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 schema (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
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