# 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:

```tsx
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.

```tsx
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](https://github.com/GetStream/stream-video-js/blob/main/packages/styling/src/_global-theme-variables.scss). Use the `.str-video` selector to override:

```scss
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:

```tsx
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:

```css
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](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers) make overriding easier:

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

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


---

This page was last updated at 2026-03-13T13:18:40.849Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/ui-components/video-theme/](https://getstream.io/video/docs/react/ui-components/video-theme/).