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

# Theme overview

> Customize the look and feel of your UI.

<div />

The [ThemeProvider](/docs/embeddable-ui/components/theme-provider) component defines the overall visual look of your application. It can be customized by passing a minimal set of configuration options.

<iframe
  width="100%"
  height="350"
  src="https://ui-kit-docs-examples.vercel.app/themes"
  allow="accelerometer; clipboard-write; gyroscope;"
  style={{
overflow: 'hidden',
border: '1px solid #ECECED',
}}
  scrolling="no"
  marginWidth="0"
  marginHeight="0"
/>

```jsx theme={"system"}
import {
  TimeSeries,
  Container,
  RelativeTimeRange,
  TimeSeriesGranularity,
  ThemeProvider,
} from "@propeldata/ui-kit";

export default async function TimeSeriesExample() {
  return (
    <Container p="5">
      <ThemeProvider
        accentColor="grass"
        grayColor="olive"
        panelBackground="solid"
        scaling="100%"
        radius="none"
      >
        <TimeSeries
          variant="bar"
          query={{
            metric: { count: { dataPool: { name: "TacoSoft Demo Data" } } },
            timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
            granularity: TimeSeriesGranularity.Day,
          }}
        />
      </ThemeProvider>
    </Container>
  );
}
```

A well-tuned set of defaults is provided to get you started, but don't be afraid to play with all of the available options to find the right visual style for your application.

## Tokens

Tokens provide direct access to theme values and give you the flexibility to build and customize your own themed components.

For all available theme tokens see the [source code](https://github.com/propeldata/ui-kit/tree/main/packages/ui-kit/src/themes/tokens), or read more about each type of token in the relevant theme pages.

<CardGroup cols={2}>
  <Card title="Color" icon="fill-drip" href="/docs/embeddable-ui/themes/color">
    Understand the color system and its application in your theme.
  </Card>

  <Card title="Dark mode" icon="moon" href="/docs/embeddable-ui/themes/dark-mode">
    Manage and integrate dark mode.
  </Card>

  <Card title="Typography" icon="font" href="/docs/embeddable-ui/themes/typography">
    Render titles and body copy.
  </Card>

  <Card title="Spacing" icon="arrows-left-right" href="/docs/embeddable-ui/themes/spacing">
    Control spacing between components.
  </Card>

  <Card title="Breakpoints" icon="arrows-maximize" href="/docs/embeddable-ui/themes/breakpoints">
    Define responsive breakpoints for your layout.
  </Card>

  <Card title="Radius" icon="circle" href="/docs/embeddable-ui/themes/radius">
    Choose the border radius for UI elements.
  </Card>

  <Card title="Shadows" icon="umbrella-beach" href="/docs/embeddable-ui/themes/shadows">
    Select shadow styles for your components.
  </Card>

  <Card title="Cursors" icon="arrow-pointer" href="/docs/embeddable-ui/themes/cursors">
    Customize cursor styles for interactive elements.
  </Card>
</CardGroup>