Creating a custom theme
In yourlatitude.json
file, you can define a custom theme by adding a theme
object with your chosen values.
Each theme includes a set of attributes specifying CSS colors or values for different elements.
Take a look at the default values for the latitude
theme:
latitude.json
Dark mode
You can add adark
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. If a property is not defined in the dark
object, the default value will be used.
With a dark version defined, you can configure the behaviour of your theme with the themeMode
property. By default, the theme mode is set to light
, but you can change it to dark
to force dark mode, or system
to use the system’s preference.
latitude.json
Chart styles
Each chart component within Latitude is built on top of echarts, which already has its own theming system. By default, we create a basic theme for echarts that matches the attributes from your Latitude theme. However, you can customize the echarts theme to match your brand. To customize the styles of your charts, include aecharts
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.
latitude.json