> ## Documentation Index
> Fetch the complete documentation index at: https://botpress-pb-update-api.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# StylesheetProvider

<Panel>
  ```jsx App.jsx theme={null}
  import { StylesheetProvider } from '@botpress/webchat'

  const config = {
    color: '#3778f0',
    fontFamily: 'Inter',
    radius: 1,
    variant: 'soft',
    themeMode: 'light',
    headerVariant: 'solid'
  }

  function App() {
    return (
        <StylesheetProvider
          color={config.color}
          fontFamily={config.fontFamily}
          radius={config.radius}
          variant={config.variant}
          themeMode={config.themeMode}
        />
    )
  }
  ```
</Panel>

The `StylesheetProvider` component dynamically generates and injects a custom Webchat theme based on your configuration.
This includes styling variables like:

* Colors
* Border radius
* Font family
* Theme variant

The generated theme is automatically injected into the page using a `<style>` tag and supports both light and dark modes.

## Props

<ResponseField name="color" type="string">
  Primary theme color in hex format.
</ResponseField>

<ResponseField name="radius" type="number">
  Corner radius for UI elements. Can be `0.5` - `4`
</ResponseField>

<ResponseField name="themeMode" type="'light' | 'dark'">
  Light or dark mode theme.
</ResponseField>

<ResponseField name="variant" type="'solid' | 'soft'">
  Visual style of the chat window.
</ResponseField>

<ResponseField name="fontFamily" type="'rubik' | 'inter' | 'ibm' | 'fira'">
  Font family used in Webchat.
</ResponseField>

<ResponseField name="headerVariant" type="'solid' | 'glass'">
  Style variant of the header.
</ResponseField>