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.

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 StreamLayerSDK component directly.

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;
}