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.

​
Usage

App.tsx
import { StylesheetProvider } from '@botpress/webchat'

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

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

​
Props

​
color
string

The primary color used in your generated theme. It must be a 6-digit hex value.

​
fontFamily
'rubik', 'inter', 'ibm', 'fira'

The font family used throughout the Webchat UI.

​
radius
number (1 - 4)

Controls the border radius of Webchat UI elements like cards, buttons, and message bubbles.

​
variant
'solid' | 'soft'

Defines the overall style variant of the UI.

​
themeMode
'light' | 'dark'

Sets the theme mode.

Was this page helpful?

Suggest editsRaise issue