Themes allow you to customize all design aspects of your project in order to meet the specific needs of your business or brand and have a consistent tone of your application. Themes allow you to configure colors of components, the darkness of surfaces, level of shadow, and the opacity of ink elements.


The optional ThemeProvider component enables customization. For detailed usage information for the component, see ThemeProvider. To see the complete range of values that can be overridden, refer to the default theme.

// src/App.js

// 1. Import `ThemeProvider` from the UI kit.
import { CommsProvider, ThemeProvider } from '@dolbyio/comms-uikit-react';

// 2. Define a custom theme. Any values provided here will be merged with the default theme.
const theme = {
  colors: {
    background: 'white',

// 3. Wrap the existing app code with the configured `ThemeProvider`, passing in the `theme` property.
function App() {
  return (
    <ThemeProvider theme={theme}>
      <CommsProvider token={token} refreshToken={refreshToken}>
        <div className="App">...</div>

Did this page help you?