# Template Mode

Two template modes are available in the Crema i.e. **Light** and **Dark**. You can choose any one of the those according to your choice. Switching between the Modes is very easy.

**Changing Template Mode in run time:-**

Click on the Settings button on the right corner of the screen just below the notification icon, a drawer will open in which you will find Template Mode Option and from there, you can choose between Light and Dark Mode.

**Changing Template Mode in development mode (setting default Mode) :-**

To set the default Template Mode(**Light/Dark**), go to the following file:-

```
src/@crema/utility/AppContextProvider/defaultConfig.tsx
```

In this file, you will find a property named '**themeMode**'. You need to set the value of '**themeMode**' according to your choice from the accepted values. You can find the accepted values of '**themeMode**' in the file with the path src/shared/constants/AppEnums.js:-

```javascript
const defaultConfig = {
  themeMode: ThemeMode.LIGHT,
};

here is the both options of the theme mode
export const ThemeMode = {
  LIGHT: 'light',
  DARK: 'dark',
};
```

For Setting **Dark/Light** mode, you need to follow one more step :-

In the 'defaultConfig.js' file, there is a object type property named "**palette**" which contains some template related properties. In the palette object, there is a property named 'type', you need to set the value of type to '**ThemeMode.DARK**'. After that, you need to set the **background color** and **text color** present in the 'palette' property according to your choice. In case, you don't want to set the color, simply remove the '**background**' and '**text**' property, then the template will take the **background** and **text** color according to Material UI default colors.

Look at the image for reference:-​ 

![Crema Theme Mode](https://2823473119-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcG03Muvufq8OIEHGplxY%2Fuploads%2FpZvYYniT8rvGzOrap7Hi%2Fimage.png?alt=media\&token=765da565-ae07-4092-a364-456e6c406878)

{% hint style="info" %}
Don't Forgot to change the default sidebar color scheme regarding your requirement as below
{% endhint %}

Here is the default configuration of the sidebar color

```javascript
const defaultConfig = {
  sidebar: {
    borderColor: '#757575',
    menuStyle: MenuStyle.DEFAULT,
    isSidebarBgImage: false,
    sidebarBgImage: 1,
    colorSet: LightSidebar, //change this as your requremt light and dark
  },
  ......
}

######### Two different sidebar color set defied #########

export const DarkSidebar = {
  sidebarBgColor: '#313541',
  sidebarTextColor: '#fff',
  sidebarHeaderColor: '#313541',
  sidebarMenuSelectedBgColor: '#F4F7FE',
  sidebarMenuSelectedTextColor: 'rgba(0, 0, 0, 0.87)',
  mode: ThemeMode.DARK,
};

export const LightSidebar = {
  sidebarBgColor: '#fff',
  sidebarTextColor: 'rgba(0, 0, 0, 0.60)',
  sidebarHeaderColor: '#fff',
  sidebarMenuSelectedBgColor: '#F4F7FE',
  sidebarMenuSelectedTextColor: 'rgba(0, 0, 0, 0.87)',
  mode: ThemeMode.LIGHT,
};
```