StylesheetProvider

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}
    />
  )
}

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