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.

   import { createTheme } from '@sitecore-search/ui'; 
   
   const myTheme = createTheme();

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

   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:

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