All Latitude components are designed to be easily customized to match your brand. This guide will walk you through the process of customizing the look and feel of Latitude Views.

​
Creating a custom theme

In your latitude.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:

{
  "background": "hsl(0 0% 100%)",
  "foreground": "hsl(222.2 84% 4.9%)",
  "primary": "hsl(221.2 83.2% 53.3%)",
  "primary-foreground": "hsl(210 40% 98%)",
  "secondary": "hsl(210 40% 96.1%)",
  "secondary-foreground": "hsl(222.2 47.4% 11.2%)",
  "muted": "hsl(210 40% 96.1%)",
  "muted-foreground": "hsl(215.4 16.3% 46.9%)",
  "accent": "hsl(210 40% 96.1%)",
  "accent-foreground": "hsl(222.2 47.4% 11.2%)",
  "destructive": "hsl(0 72.22% 50.59%)",
  "destructive-foreground": "hsl(210 40% 98%)",
  "border": "hsl(214.3 31.8% 91.4%)",
  "input": "hsl(214.3 31.8% 91.4%)",
  "ring": "hsl(221.2 83.2% 53.3%)",
  "radius": "0.5rem",
}

Create your own theme by building on this structure. Color definitions can be in any format that CSS supports, such as hex, rgb, hsl, etc. You do not have to redefine every property, only the ones you want to change from the default theme.

latitude.json
{
  "name": "my-latitude-project",
  "theme": {
    "primary": "#254E70",
    "background": "#c1c1c1",
    "foreground": "#000012",
  }
}

​
Dark mode

You can add a 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. 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
{
  "name": "my-latitude-project",
  "theme": {
    "primary": "#254E70",
    "background": "#c1c1c1",
    "foreground": "#000012",
    "dark": {
      "primary": "#254E70",
      "background": "#000012",
      "foreground": "#c1c1c1",
    }
  },
  "themeMode": "system"
}

​
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 a 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.

latitude.json
{
  "name": "my-latitude-project",
  "theme": {
    "echarts": {
      "color": [ "#52B788", "#95D5B2", "#40916C" ],
    }
  }
}
LinkComponent styles