Theme

The React Video SDK ships with a default UI theme (CSS stylesheet) you can include in your application.

Best Practices

Import SDK styles before your own CSS for easier overrides.
Use CSS variables for theming instead of overriding component styles directly.
Use CSS cascade layers to simplify style overrides.
Test custom CSS rules after each SDK update - HTML/CSS structure may change.

Usage

Importing the CSS

Import the CSS stylesheet from the SDK's dist folder:

import "@stream-io/video-react-sdk/dist/css/styles.css";
// ideally, Stream Video theme should be imported before your own styles
// as this would make it easier for you to override certain video-theme rules
import "./my-styles.css";

Using the StreamTheme component

<StreamTheme /> renders an HTML element with the str-video CSS class, enabling the default theme for its children. It supports the as prop to render different elements (default: <div>) and accepts any HTML attribute as props.

import { StreamTheme, StreamVideo } from "@stream-io/video-react-sdk";

export const App = () => {
  return (
    <StreamVideo client={client}>
      <StreamTheme as="main" className="my-custom-root-class">
        <MyAppUI />
      </StreamTheme>
    </StreamVideo>
  );
};

Customization

Theme variables

Customize colors, border-radius settings, and icons using CSS variables defined in our variables file. Use the .str-video selector to override:

import '@stream-io/video-react-sdk/dist/css/style.css';

// Use your own font
html {
  font-family: sans-serif;
}

.str-video {
  --str-video__primary-color: #6002ee;
  --str-video__secondary-color: #90ee02;
  --str-video__text-color1: #282b2b;
  --str-video__border-radius-circle: 15px;
  --str-video__icon--download: url('base64 encoded SVG')
}

Light and dark themes

The SDK comes with a single predefined theme. Configure additional themes using the className prop:

import { StreamTheme, StreamVideo } from "@stream-io/video-react-sdk";
import { useState } from "react";

export const App = () => {
  const [theme, setTheme] = useState<"dark" | "light">("dark");

  return (
    <StreamVideo client={client}>
      <button onClick={() => setTheme("dark")}>Dark theme</button>
      <button onClick={() => setTheme("light")}>Light theme</button>
      <StreamTheme className={theme}>
        <MyAppUI />
      </StreamTheme>
    </StreamVideo>
  );
};

Provide the configuration for the different themes:

import '@stream-io/video-react-sdk/dist/css/style.css';

.str-video.dark {
  --str-video__primary-color: #00796b;
  --str-video__secondary-color: #cddc39;
  // other colors
}

.str-video.light {
  --str-video__primary-color: #009688;
  --str-video__secondary-color: #dce775;
   // other colors
}

Custom CSS code

For minor design tweaks, writing CSS is often easier than creating custom components. Note that HTML/CSS structure may change with any release - test custom CSS rules after SDK updates.

CSS cascade layers make overriding easier:

@import url("@stream-io/video-react-sdk/dist/css/styles.css")
layer(video-default);

.str-video__call-controls__button {
  padding: 20px;
}

Overview

Call Control Actions