> ## Documentation Index
> Fetch the complete documentation index at: https://www.propeldata.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dark mode

> Manage and integrate dark mode.

<div />

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

<Tabs>
  <Tab title="Light">
    Light mode is the default.

    ```jsx theme={"system"}
    <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>
    ```
  </Tab>

  <Tab title="Dark">
    To enable dark mode, set the `appearance` prop to `dark`.

    ```jsx theme={"system"}
    <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>
    ```
  </Tab>
</Tabs>