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 components.

​
Changing theme

When Latitude is added to your app, the 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:

  • latitude
  • rose
  • green
  • orange

To use a theme, you can pass the theme name to the theme prop of the LatitudeProvider component.

import { LatitudeProvider, themes } from '@latitude/core';

function App() {
  return (
    <LatitudeProvider theme={themes["rose"]}>
      <AppContent />
    </LatitudeProvider>
  );
}

​
Creating a custom theme

Themes consist of attribute definitions. You can create your own theme by assembling a new 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.

import { LatitudeProvider } from '@latitude/react';

const myTheme = {
  primary: '#254E70',
  secondary: '#F2F2F2',
}

function App() {
  return (
    <LatitudeProvider theme={myTheme}>
      <AppContent />
    </LatitudeProvider>
  );
}

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

import { LatitudeProvider } from '@latitude/react';

const myTheme = {
  primary: '#254E70',
  secondary: '#F2F2F2',
  background: '#fff',
  foreground: '#000',

  dark: {
    background: '#000',
    foreground: '#fff',
  }
}

function App() {
  return (
    <LatitudeProvider theme={myTheme} mode="system">
      <AppContent />
    </LatitudeProvider>
  );
}

Then, you can enable dark mode in you app by setting the mode prop of the LatitudeProvider component to dark.

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

import { LatitudeProvider } from '@latitude/react';

const myTheme = {
  echarts: {
    color: [ '#52B788', '#95D5B2', '#40916C' ],
  },
}

function App() {
  return (
    <LatitudeProvider theme={myTheme}>
      <AppContent />
    </LatitudeProvider>
  );
}

​
Customizing components

For more advanced customization, we recommend using Tailwind, since all Latitude components are built with Tailwind and accept Tailwind classes as props. However, you can use any styling solution you prefer.

QueryResultTable