Skip to main content

Theme

The StreamLayerSDK components can be customized to match your application's theme. You can override the default styles by providing a custom theme class name where you redefine the allowed variables.

Theme Mode​

The StreamLayerSDK component supports two theme modes: light and dark. And you can set the theme mode by passing the themeMode prop to the StreamLayerProvider component. By default, the theme mode is light.

main.jsx
import { StreamLayerProvider } from '@streamlayer/react'
import { YourApp } from './app'

export const Main = () => {
  return (
    <StreamLayerProvider
      sdkKey="your-sdk-key"
      event="your-event-id"
      themeMode="dark"
    >
      <YourApp />
    </StreamLayerProvider>
  )
}

Override the default theme​

Create styles​

Create a CSS file with the custom theme class name.

styles.css
.StreamLayerSDK > .StreamLayerSDKTheme > .your-custom-theme {
  --adv-sponsor-logo-size: 42px;
}

Configure StreamLayer​

Import the CSS file in your application. And pass the custom theme class name to the theme prop of the StreamLayerSDK component directly.

main.jsx
import { StreamLayerProvider } from '@streamlayer/react'
import { YourApp } from './app'
import './styles.css'

export const Main = () => {
  return (
    <StreamLayerProvider
      sdkKey="your-sdk-key"
      event="your-event-id"
      themeMode="dark"
      theme="your-custom-theme"
    >
      <YourApp />
    </StreamLayerProvider>
  )
}

Dark / Light mode override​

You can override the default theme for the dark and light mode by using the dark and light class names.

dark-styles.css
.StreamLayerSDK > .StreamLayerSDKTheme > .your-custom-theme.dark {
  --color-sdk-container-bg: #1a2d40;
}
light-styles.css
.StreamLayerSDK > .StreamLayerSDKTheme > .your-custom-theme.light {
  --color-sdk-container-bg: #f7f7f7;
}