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

> Customize the look and feel of your UI.

<div />

```jsx theme={"system"}
<ThemeProvider accentColor="grass">
  // Components
</ThemeProvider>
```

<div className="flex justify-center gap-8 mt-2">
  <a href="https://github.com/propeldata/ui-kit/blob/main/packages/ui-kit/src/components/Log/LogProvider.tsx" target="_blank" className="flex items-center gap-2 text-xs">
    <Icon icon="github" size={18} />

    GitHub

    <Icon icon="arrow-up-right-from-square" size={12} />
  </a>
</div>

## Props API

<ParamField path="appearance" type={`ThemeAppearances`}>
  The initial theme used as a base. It provides a default set of styling
  from which customizations can be applied.

  <Expandable title="ThemeAppearances">
    <ParamField path="ThemeAppearances" type={`"light" | "dark"`} />
  </Expandable>
</ParamField>

<ParamField path="accentColor" type={`AccentColors`}>
  The global theme accent color. This color is used to highlight elements

  <Expandable title="AccentColors">
    <ParamField path="AccentColors" type={`"amber" | "blue" | "bronze" | "brown" | "crimson" | "cyan" | "gold" | "grass" | "gray" | "green" | "indigo" | "iris" | "jade" | "lime" | "mint" | "orange" | "pink" | "plum" | "purple" | "red" | "ruby" | "sky" | "teal" | "tomato" | "violet" | "yellow"`} />
  </Expandable>
</ParamField>

<ParamField path="grayColor" type={`GrayColors`}>
  The global theme gray color. This color is used for text and background colors

  <Expandable title="GrayColors">
    <ParamField path="GrayColors" type={`"auto" | "gray" | "mauve" | "slate" | "sage" | "olive" | "sand"`} />
  </Expandable>
</ParamField>

<ParamField path="radius" type={`Radii`}>
  The global theme radius color. This color is used for border radius

  <Expandable title="Radii">
    <ParamField path="Radii" type={`"none" | "small" | "medium" | "large" | "full"`} />
  </Expandable>
</ParamField>

<ParamField path="scaling" type={`Scalings`}>
  The global theme scaling. This value is used to scale components

  <Expandable title="Scalings">
    <ParamField path="Scalings" type={`"90%" | "95%" | "100%" | "105%" | "110%"`} />
  </Expandable>
</ParamField>

<ParamField path="panelBackground" type={`PanelBackgrounds`}>
  The global theme panel background. This value is used to set the panel background

  <Expandable title="PanelBackgrounds">
    <ParamField path="PanelBackgrounds" type={`"solid" | "translucent"`} />
  </Expandable>
</ParamField>