Dark mode

Manage and integrate dark mode.

Light and dark modes are supported out of the box, allowing you to easily switch appearance without additional design or styling.

Light

Light mode is the default.

<ThemeProvider
 accentColor="blue"
>
 <TimeSeries
   variant="bar"
   query={{
     accessToken: "<PROPEL_ACCESS_TOKEN>",
     metric: {
       count: {
         dataPool: { name: "TacoSoft Demo Data" }
       },
     }
     timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
     granularity: "DAY",
   }}
   />
 </ThemeProvider>

Dark

To enable dark mode, set the appearance prop to dark.

<ThemeProvider
  accentColor="blue"
  appearance="dark"
>
  <TimeSeries
    color ="green"
    variant="bar"
    query={{
      accessToken: "<PROPEL_ACCESS_TOKEN>",
      metric: {
        count: {
          dataPool: { name: "TacoSoft Demo Data" }
        },
      }
      timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
      granularity: "DAY",
    }}
  />
</ThemeProvider>