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.

Mode

The StreamLayerSDK component supports two theme modes: light and dark. Set the theme mode by passing the themeMode prop to the StreamLayerProvider component. The default mode is light.

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.

.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 StreamLayerProvider component.

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.

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

.StreamLayerSDK > .StreamLayerSDKTheme > .your-custom-theme.light {
  --color-sdk-container-bg: #f7f7f7;
}

Related

Integration Guide — Full Web SDK setup and configuration
StreamLayerSDKReact — Main interactive UI component

Updated 21 days ago