---
title: "Create and use a custom theme"
slug: "create-and-use-a-custom-theme"
abstract: "How to create and use a custom theme using Sitecore Search JS SDK and UI components."
---
# 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:

1. In your React project, open your `application` component.
2. In the component, create a default theme object as shown in the following code block, and fix import statements.

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

    const myTheme = createTheme();
    ```

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

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

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

4. In your `application` component, in the return statement, to the `div` wrapper of `WidgetsProvider`, set the value to style as shown in following:

    ```js
    <div style={myTheme.style}>
      <WidgetsProvider>Nested content.</WidgetsProvider>
    </div>
    ```