##### Theme Styles

##### Primary Color For All Themes

#### How to Change Primary Color for All Themes (Light, Dark, Transparent)?

###### Please follow the below steps to change Primary Color

###### Step 1 :

To change Primary Color you have to open _bootstrap-styles.scss file and replace what color you want as shown in below

Rootpath : _bootstrap-styles.scss (assets/scss/bootstrap/_bootstrap-styles.scss )

###### Step 2 :

Note : After Changing color you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

##### Light Theme Style

If you want to change Light Theme color you need to follow the below process. Below are the background color, text color and border color of Light Theme. Please follow the below process.

#### How to Change Light Background Color?

###### Please follow the below steps to change Light Background Color

###### Step 1 :

To change Light Background Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (assets/scss/_variables.scss )

###### Step 2 :

Note : After Changing color you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

#### How to Change Light Text Color?

###### Please follow the below steps to change Light Text Color

###### Step 1 :

To change Light Text Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (assets/scss/_variables.scss )

###### Step 2 :

Note : After Changing color you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

#### How to Change Light Border Color?

###### Please follow the below steps to change Light Border Color

###### Step 1 :

To change Light Border Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (assets/scss/_variables.scss )

###### Step 2 :

Note : After Changing color you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

##### Dark Theme Style

If you want to change Dark Theme color you need to follow the below process. Below are the body color, theme color, border color and text color of Dark Theme. Please follow the below process.

#### How to Change Dark body Color?

###### Please follow the below steps to change Dark body Color

###### Step 1 :

To change Dark body Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (assets/scss/_variables.scss )

###### Step 2 :

Note : After Changing color you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

#### How to Change Dark Theme Color?

###### Please follow the below steps to change Dark Theme Color

###### Step 1 :

To change Dark Theme Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (assets/scss/_variables.scss )

###### Step 2 :

Note : After Changing color you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

#### How to Change Dark Border Color?

###### Please follow the below steps to change Dark Border Color

###### Step 1 :

To change Dark Border Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (assets/scss/_variables.scss )

###### Step 2 :

Note : After Changing color you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

#### How to Change Dark Text Color?

###### Please follow the below steps to change Dark Text Color

###### Step 1 :

To change Dark Text Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (assets/scss/_variables.scss )

###### Step 2 :

Note : After Changing color you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

##### Transparent Theme Style

If you want to change Transparent Theme color you need to change Transparent Body Color. Please follow the below process.

#### How to Change Transparent Body Color?

###### Please follow the below steps to change Transparent Body Color

###### Step 1 :

To change Transparent Body Color you have to open _bootstrap-styles.scss file and replace what color you want as shown in below

Rootpath : _bootstrap-styles.scss (assets/scss/bootstrap/_bootstrap-styles.scss )

###### Step 2 :

Note : After Changing color you must run gulp command i.e, `gulp watch` . Refer gulp page for more gulp commands click here.

##### Background Image Style

If you want to give best background image for your Transparent Theme you need to follow below process.

#### How to Enable Transparent Background Image Style1?

###### Please follow the below steps to enable Transparent Background Image Style1

###### Step 1 :

To enable Transparent Background Image you have to open custom.js file and remove comments for `bg-img1` as shown in below

    		// Bg-Image1 Style
    		// $('body').addClass('bg-img1');
    		// $('body').addClass('transparent-mode');
    		// $('body').removeClass('light-mode');
    		// $('body').removeClass('dark-mode');

###### Step 2 :

Remove the comments to enable `bg-img1` as shown below

    		// Bg-Image1 Style
    		$('body').addClass('bg-img1');
    		$('body').addClass('transparent-mode');
    		$('body').removeClass('light-mode');
    		$('body').removeClass('dark-mode');

Go To "assets/images/media" folder and replace your image with Previous image(bg-img1) within in image size.

Note: Please don't increase image size. Replace your image within given image size. otherwise the image will not fit in particular place it disturbs the template design.

#### How to Enable Transparent Background Image Style2?

###### Please follow the below steps to enable Transparent Background Image Style2

###### Step 1 :

To enable Transparent Background Image Style2 you have to open custom.js file and remove comments for `bg-img2` as shown in below

    		// Bg-Image2 Style
    		// $('body').addClass('bg-img2');
    		// $('body').addClass('transparent-mode');
    		// $('body').removeClass('light-mode');
    		// $('body').removeClass('dark-mode');

###### Step 2 :

Remove the comments to enable `bg-img2` as shown below

    		// Bg-Image2 Style
    		$('body').addClass('bg-img2');
    		$('body').addClass('transparent-mode');
    		$('body').removeClass('light-mode');
    		$('body').removeClass('dark-mode');

Go To "assets/images/media" folder and replace your image with Previous image(bg-img1) within in image size.

Note: Please don't increase image size. Replace your image within given image size. otherwise the image will not fit in particular place it disturbs the template design.

#### How to Enable Transparent Background Image Style3?

###### Please follow the below steps to enable Transparent Background Image Style3

###### Step 1 :

To enable Transparent Background Image Style3 you have to open custom.js file and remove comments for `bg-img3` as shown in below

    		// Bg-Image3 Style
    		// $('body').addClass('bg-img3');
    		// $('body').addClass('transparent-mode');
    		// $('body').removeClass('light-mode');
    		// $('body').removeClass('dark-mode');

###### Step 2 :

Remove the comments to enable `bg-img3` as shown below

    		// Bg-Image3 Style
    		$('body').addClass('bg-img3');
    		$('body').addClass('transparent-mode');
    		$('body').removeClass('light-mode');
    		$('body').removeClass('dark-mode');

Go To "assets/images/media" folder and replace your image with Previous image(bg-img1) within in image size.

Note: Please don't increase image size. Replace your image within given image size. otherwise the image will not fit in particular place it disturbs the template design.

#### How to Enable Transparent Background Image Style4?

###### Please follow the below steps to enable Transparent Background Image Style4

###### Step 1 :

To enable Transparent Background Image Style4 you have to open custom.js file and remove comments for `bg-img4` as shown in below

    		// Bg-Image4 Style
    		// $('body').addClass('bg-img4');
    		// $('body').addClass('transparent-mode');
    		// $('body').removeClass('light-mode');
    		// $('body').removeClass('dark-mode');

###### Step 2 :

Remove the comments to enable `bg-img4` as shown below

    		// Bg-Image4 Style
    		$('body').addClass('bg-img4');
    		$('body').addClass('transparent-mode');
    		$('body').removeClass('light-mode');
    		$('body').removeClass('dark-mode');

Go To "assets/images/media" folder and replace your image with Previous image(bg-img1) within in image size.

Note: Please don't increase image size. Replace your image within given image size. otherwise the image will not fit in particular place it disturbs the template design.