Theme

The React Video SDK ships with a default UI theme (CSS stylesheet) that you can include in your application. In this chapter, we'll go through the details on how you can utilize and customize the default theme.

Usage

Importing the CSS

The SDK includes a CSS stylesheet that can be easily imported into your project to apply a pre-built theme to your video components. To use the CSS stylesheet, you can import it 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

The <StreamTheme /> component is a utility component that renders an HTML element with the CSS class name of str-video attached to it. This CSS class enables our default theme to be applied to the children of the rendered element.

The <StreamTheme /> supports the as property, allowing you to render different HTML elements or custom components based on the value of the as prop. By default, the <StreamTheme /> component renders a <div> element, but you can pass any valid HTML element or custom React component to the as prop to render a different element.

In addition, you can also pass any other HTML attribute as a prop to the StreamTheme component, which will be applied to the rendered element.

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

You can customize the colors, border-radius settings, and icons used by the built-in UI components.

Customizing can be done using CSS variables defined in our variables file.

Use the .str-video selector to override theme variables.

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 React Video SDK comes with a single predefined theme. However, you can configure more themes, for example, to support light and dark modes.

You can use the className prop of the StreamTheme to provide the selected theme:

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

If you want to tweak the design/layout of a built-in component, it's often easier to write a few lines of CSS code than to create your own custom component.

However, please note that the HTML/CSS structure of the UI components can change with any new release (even with patch releases), so you should test if your custom CSS rules are still working with each SDK update.

CSS cascade layers make it easier to override the default styles of the SDK, here is an example:

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

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