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