Theming

General information

All charts support light and dark themes. However, it's worth noting that the theme doesn't switch automatically, the default theme is dark. You can switch the theme by using the appropriate props (colorScheme). The surf-charts library is made to make it as easy as possible for you to change styles, you only need a few classes to change the whole chart theme.

Default Themes

As you already know, surf-charts supports dark and light themes via the colorScheme prop, which takes one of two values light or dark. All library styles are completely open and you can modify and overwrite them using the className and styling props. Change, overwrite and experiment. The whole library works completely out-of-the-box, but allows you to change almost everything inside if you need to.

Switching themes

Switching between light and dark themes in surf-charts is straightforward. By setting the colorScheme prop on any chart component, you can instantly change the visual style to match your application's theme.

Example: light theme

import { VerticalChart } from '@surf/charts';
 
const data = [
  { label: 'January', value: 120 },
  { label: 'February', value: 80 },
  { label: 'March', value: 150 },
  { label: 'April', value: 130 },
  { label: 'May', value: 70 }
];
 
<VerticalChart label='Sales' colorScheme='light' data={data} />;

Result

Example: dark theme

import { VerticalChart } from '@surf/charts';
 
const data = [
  { label: 'January', value: 120 },
  { label: 'February', value: 80 },
  { label: 'March', value: 150 },
  { label: 'April', value: 130 },
  { label: 'May', value: 70 }
];
 
<VerticalChart label='Sales' colorScheme='dark' data={data} />;

Result

Customizing the theme

While the colorScheme prop provides a quick way to toggle between light and dark themes, you can further customize the appearance by using the className and styling props. These allow you to apply specific styles that match your brand or design language.

For example you can customize the background, borders or text using TailwindCSS classes:

<VerticalChart
  label='Sales'
  colorScheme='dark'
  className='bg-gray-800 border border-gray-700 rounded-lg'
  styling={{
    labelClass: 'text-white',
    tooltipClass: 'bg-gray-900 text-white'
  }}
  data={data}
/>

Automatic theme switching with TailwindCSS

To enable automatic theme switching based on user preferences or system settings, you can use TailwindCSS's dark: variant. This allows you to define styles that change dynamically depending on whether the user has a dark mode enabled.

Steps for automatic theme switching

1. Set the initial theme: Start by setting the initial theme for your chart using the colorScheme prop. This will ensure that the chart is correctly styled in either light or dark mode.
2. Use TailwindCSS dark: variant: Apply the dark: variant to TailwindCSS classes within the className or styling props to define styles that will be applied when dark mode is active.

Example

import { VerticalChart } from '@surf/charts';
 
const data = [
  { label: 'January', value: 120 },
  { label: 'February', value: 80 },
  { label: 'March', value: 150 }
];
 
<VerticalChart
  label='Sales'
  colorScheme='light'
  className='bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg'
  styling={{
    labelClass: 'text-black dark:text-white',
    tooltipClass: 'bg-gray-100 dark:bg-gray-900 text-black dark:text-white'
  }}
  data={data}
/>;

In this example, the chart will automatically switch between light and dark themes based on TailwindCSS themes system, ensuring a seamless user experience.

Extending and overwriting styles

The surf-charts library is designed to be flexible and customizable. If the default themes don't fully meet your needs, you can easily extend or overwrite the styles provided by the library.

You can create your own themes by combining custom classes with the colorScheme, className and styling props. This allows you to build a completely unique look while still taking advantage of the library's core functionality.