Create and use a custom theme

Adding a theme to an application with CSS variables is the fastest way to style your components. You can use the default theme or a custom theme.

To create and use a custom theme:

In your React project, open your application component.
In the component, create a default theme object as shown in the following code block, and fix import statements.
RequestResponse
```
import { createTheme } from '@sitecore-search/ui'; 

const myTheme = createTheme();
```

To create a custom theme, add CSS variables as shown in the following:

RequestResponse

import { createTheme } from '@sitecore-search/ui'

const myTheme = createTheme({
  palette: {
    primary: {
      main: '#F00',
      light: '#EEECFB',
      dark: '#4A37D5',
      contrastText: '#fff',
    },
  }
});

In your application component, in the return statement, to the div wrapper of WidgetsProvider, set the value to style as shown in following:
RequestResponse
```
<div style={myTheme.style}>
  <WidgetsProvider>Nested content.</WidgetsProvider>
</div>
```

Do you have some feedback for us?

If you have suggestions for improving this article,