Customize the look and feel of specific Latitude components in your views
LatitudeProvider
component provides a theme for all components. By default, the theme uses the Latitude color palette, but we have a few predefined themes that you can use.
The available themes are available in the themes
object, which currently has 4 themes:
theme
prop of the LatitudeProvider
component.
latitude
theme:
dark
version of your theme by adding a dark
object to your theme. This object should have the same properties as the main theme, but with the colors inverted.
With a dark version defined, you can configure the behaviour of your theme with the mode
property. By default, the mode is set to light
, but you can change it to dark
to force dark mode, or system
to use the system’s preference.
mode
prop of the LatitudeProvider
component to dark
.
echarts
object in your theme and define any echarts properties you want to use.
To learn more about each property, please refer to the official echarts documentation.
You can find the complete echart properties used in Latitude’s default theme below:
If you want to personalize the styles for your charts, we recommend using echart’s online theme builder to easily create your own styles.
To do this, simply select the colors you want to use, click on the “Download” at the top-left corner and copy the “JSON version” object into the echarts
property in your theme.