Step 1:

Go To _fonts.scss (assets/scss/custom/fonts/_fonts.scss )

if you want to change another font-family Go to the site Google Fonts And Slect One font Family and import In to style.css file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in Style.scss i.e (root:-assets/scss/style.scss)

Example:

Step 3:

And add the Your Selected font-family in _custom-styles.scss(assets/scss/custom/_custom-styles.scss)

Example:

	body {
		font-family: "Roboto", sans-serif;
	}
	

Step 1:

Go To _custom-styles.scss (assets/scss/custom/_custom-styles.scss )

You will find --primary-bg-color:#0162e8; , where you can simply change color code to change primary color

How to Change Primary Color

Example:

Simply you can also change color for primary-bg-hover:#025cd8; & --primary-bg-border:#0162e8; , where you can simply change color code to change them

Go To "assets/img/brand" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

Please follow the below steps to enable RTL Version

To enable RTL Version you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for rtl as shown in below

											/******* RTL VERSION adding class *******/

   document.querySelector(".app").classList.add("rtl");
// document.querySelector("html[lang=en]").setAttribute("dir", "rtl");
// document.querySelector(".app").classList.remove("ltr");

										

Please follow the below steps to remove LTR Version

To remove LTR Version you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for ltr as shown in below

											/******* LTR VERSION *******/

   document.querySelector(".app").classList.add("ltr");
// document.querySelector("html[lang=en]").setAttribute("dir", "ltr");
// document.querySelector(".app").classList.remove("rtl");

										

Please follow the below steps to enable dark Version

To enable dark Version you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for Darktheme as shown in below

											/******* Dark mode adding Class *******/

document.querySelector(".body").classList.add("dark-theme");

										

Please follow the below steps to remove dark Version

To remove dark Version you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for Darktheme as shown in below

											/******* Dark mode remove Class *******/

document.querySelector(".body").classList.remove("transparent-theme");
document.querySelector(".body").classList.remove("light-theme");
document.querySelector(".body").classList.remove("light-header");
document.querySelector(".body").classList.remove("color-header");
document.querySelector(".body").classList.remove("gradient-header");
document.querySelector(".body").classList.remove("light-menu");
document.querySelector(".body").classList.remove("color-menu");
document.querySelector(".body").classList.remove("gradient-menu");

										

Please follow the below steps to enable Color header

To enable Color header you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for ColorHeader as shown in below

											/******* Color header adding Class *******/

document.querySelector(".app").classList.add("color-header");

										

Please follow the below steps to remove Color header

To remove Color header you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for ColorHeader as shown in below

											/******* Color header remove Class *******/
document.querySelector(".app").classList.remove("gradient-header");
document.querySelector(".app").classList.remove("dark-header");
document.querySelector(".app").classList.remove("light-header");

										

Please follow the below steps to enable Dark header

To enable Dark header you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for DarkHeader as shown in below

											/******* Dark header adding Class *******/

document.querySelector(".app").classList.add("dark-header");

										

Please follow the below steps to remove Dark header

To remove Dark header you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for DarkHeader as shown in below

											/******* Dark header remove Class *******/
document.querySelector(".app").classList.remove("color-header");
document.querySelector(".app").classList.remove("gradient-header");
document.querySelector(".app").classList.remove("light-header");

										

Please follow the below steps to enable Light header

To enable Light header you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for LightHeader as shown in below

											/******* Light header adding Class *******/

document.querySelector(".app").classList.add("light-header");

										

Please follow the below steps to remove Light header

To remove Light header you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for LightHeader as shown in below

											/******* Light header remove Class *******/
document.querySelector(".app")..classList.remove("color-header");
document.querySelector(".app")..classList.remove("gradient-header");
document.querySelector(".app")..classList.remove("dark-header");

										

Please follow the below steps to enable Gradient header

To enable Gradient header you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for GradientHeader as shown in below

											/******* Gradient header adding Class *******/

document.querySelector(".app").classList.add("gradient-header");

										

Please follow the below steps to remove Gradient header

To remove Gradient header you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for GradientHeader as shown in below

											/******* Gradient header remove Class *******/
document.querySelector(".app")..classList.remove("color-header");
document.querySelector(".app")..classList.remove("light-header");
document.querySelector(".app")..classList.remove("dark-header");

										

Please follow the below steps to enable Light Menu

To enable Light Menu you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for LightMenu as shown in below

											/******* Light Menu adding Class *******/

document.querySelector(".app").classList.add("light-menu");

										

Please follow the below steps to remove Light Menu

To remove Light Menu you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for LightMenu as shown in below

											/******* Light Menu remove Class *******/
document.querySelector(".app")..classList.remove("color-menu");
document.querySelector(".app")..classList.remove("gradient-menu");
document.querySelector(".app")..classList.remove("dark-menu");

										

Please follow the below steps to enable Color Menu

To enable Color Menu you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for ColorMenu as shown in below

											/******* Color Menu adding Class *******/

document.querySelector(".app").classList.add("color-menu");

										

Please follow the below steps to remove Color Menu

To remove Color Menu you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for ColorMenu as shown in below

											/******* Color Menu remove Class *******/
document.querySelector(".app")..classList.remove("light-menu");
document.querySelector(".app")..classList.remove("gradient-menu");
document.querySelector(".app")..classList.remove("dark-menu");

										

Please follow the below steps to enable Dark Menu

To enable Dark Menu you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for DarkMenu as shown in below

											/******* Dark Menu adding Class *******/

document.querySelector(".app").classList.add("dark-menu");

										

Please follow the below steps to remove Dark Menu

To remove Dark Menu you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for DarkMenu as shown in below

											/******* Dark Menu remove Class *******/
document.querySelector(".app")..classList.remove("light-menu");
document.querySelector(".app")..classList.remove("gradient-menu");
document.querySelector(".app")..classList.remove("color-menu");

										

Please follow the below steps to enable Gradient Menu

To enable Gradient Menu you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for GradientMenu as shown in below

											/******* Gradient Menu adding Class *******/

document.querySelector(".app").classList.add("gradient-menu");

										

Please follow the below steps to remove Gradient Menu

To remove Gradient Menu you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for GradientMenu as shown in below

											/******* Gradient Menu remove Class *******/
document.querySelector(".app").classList.remove("light-menu");
document.querySelector(".app").classList.remove("dark-menu");
document.querySelector(".app").classList.remove("color-menu");

										

Please follow the below steps to enable Boxed-Layout

To enable Boxed-Layout you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for Boxed as shown in below

											/******* Boxed-Layout adding Class *******/

document.querySelector(".app").classList.add("layout-boxed");

										

Please follow the below steps to remove Boxed-Layout

To remove Boxed-Layout you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for Boxed as shown in below

											/******* Boxed-Layout remove Class *******/
document.querySelector(".app").classList.remove("layout-fullwidth");

										

Please follow the below steps to enable Scrollable-Layout

To enable Scrollable-Layout you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for Scrollable as shown in below

											/******* Scrollable-Layout adding Class *******/

document.querySelector(".app").classList.add("scrollable-layout");

										

Please follow the below steps to remove Scrollable-Layout

To remove Scrollable-Layout you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for Scrollable as shown in below

											/******* Scrollable-Layout remove Class *******/
document.querySelector(".app").classList.remove("fixed-layout");

										

Please follow the below steps to enable Body-Style

To enable Body-Style you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for BodyStyle1 as shown in below

											/******* Body-Style adding Class *******/

document.querySelector(".app").classList.add("body-style1");

										

Please follow the below steps to remove Body-Style

To remove Body-Style you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and remove comments for BodyStyle1 as shown in below

											/******* Body-Style remove Class *******/
document.querySelector(".app").classList.remove("DefaultBody");

										

Please follow the below steps to enable Left-side closed menu

To enable Left-side closed menu you have to open header.jsx (src/layouts/layoutcomponents/header.jsx) file and write comments for leftsidemenu as shown in below

											/******* Left-side closed menu *******/

document.querySelector(".app")?.classList.toggle("sidenav-toggled");

										

Please follow the below steps to enable horizontal layout

To enable horizontal layout you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for horizontalclickmenu as shown in below

											/******* horizontal layout *******/

document.querySelector(".app").classList.add("horizontal");
document.querySelector(".app").classList.remove("sidenav-toggled");
document.querySelector(".app").classList.remove("horizontal-hover");
										

Please follow the below steps to enable horizontal-hover

To enable horizontal-hover you have to open switcherdata.jsx (/src/common/switcherdata.jsx) file and write comments for Horizontalhovermenu as shown in below

											/******* Body-Style adding Class *******/

document.querySelector(".app").classList.add("horizontal");
document.querySelector(".app").classList.add("horizontal-hover");
document.querySelector(".app").classList.remove("sidebar-mini");
document.querySelector(".app").classList.remove("sidenav-toggled");

										

Please follow the below steps to remove Switcher

Step: 1

To remove Switcher you have to open header.jsx (src/layouts/layoutcomponents/header.jsx) file and there itself you can remove or comments for switcher code as shown in below

									{/* Switcher Open */}

<className="d-flex">
<Link className="demo-icon new nav-link" to="#" onClick={() => SwitcherIcon()}>
<svg xmlns="http://www.w3.org/2000/svg" className="header-icon-svgs fa-spin" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 16c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.084 0 2 .916 2 2s-.916 2-2 2-2-.916-2-2 .916-2 2-2z" />
<path d="m2.845 16.136 1 1.73c.531.917 1.809 1.261 2.73.73l.529-.306A8.1 8.1 0 0 0 9 19.402V20c0 1.103.897 2 2 2h2c1.103 0 2-.897 2-2v-.598a8.132 8.132 0 0 0 1.896-1.111l.529.306c.923.53 2.198.188 2.731-.731l.999-1.729a2.001 2.001 0 0 0-.731-2.732l-.505-.292a7.718 7.718 0 0 0 0-2.224l.505-.292a2.002 2.002 0 0 0 .731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8.1 8.1 0 0 0 15 4.598V4c0-1.103-.897-2-2-2h-2c-1.103 0-2 .897-2 2v.598a8.132 8.132 0 0 0-1.896 1.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999 1.729a2.001 2.001 0 0 0 .731 2.732l.505.292a7.683 7.683 0 0 0 0 2.223l-.505.292a2.003 2.003 0 0 0-.731 2.733zm3.326-2.758A5.703 5.703 0 0 1 6 12c0-.462.058-.926.17-1.378a.999.999 0 0 0-.47-1.108l-1.123-.65.998-1.729 1.145.662a.997.997 0 0 0 1.188-.142 6.071 6.071 0 0 1 2.384-1.399A1 1 0 0 0 11 5.3V4h2v1.3a1 1 0 0 0 .708.956 6.083 6.083 0 0 1 2.384 1.399.999.999 0 0 0 1.188.142l1.144-.661 1 1.729-1.124.649a1 1 0 0 0-.47 1.108c.112.452.17.916.17 1.378 0 .461-.058.925-.171 1.378a1 1 0 0 0 .471 1.108l1.123.649-.998 1.729-1.145-.661a.996.996 0 0 0-1.188.142 6.071 6.071 0 0 1-2.384 1.399A1 1 0 0 0 13 18.7l.002 1.3H11v-1.3a1 1 0 0 0-.708-.956 6.083 6.083 0 0 1-2.384-1.399.992.992 0 0 0-1.188-.141l-1.144.662-1-1.729 1.124-.651a1 1 0 0 0 .471-1.108z" /></svg>
</Link>
</code>

									{/* Switcher Close */}

									

Step: 2

After remove Switcher codein the same page you have to remove or comments for switcherMenu function code as shown in below

											// SwitcherMenu

const SwitcherIcon = () => {
document.querySelector(".demo_changer").classList.toggle("active");
document.querySelector(".demo_changer").style.right = "0px";
}

									

Step: 3

At last you have to open App.jsx (src/layouts/App.jsx) and remove or comments the Switcher tag as well as the comments the imports also as shown in below

import Switcher from '../layouts/layoutcomponents/switcher';

<Switcher />

									

Please follow the below steps to remove Loader

To remove Loader you have to open main.jsx (src/main.jsx) file and remove or comments for Loader code as shown in below

"const App = lazy(() =>"

<React.Suspense fallback={<Loader/>}>
</React.Suspense>
									

if you want to change a custom loader image please follow the below steps below

Step: 1

for changing a custom image you have to open loader.jsx (src/layouts/layoutcomponents/loader.jsx) file and remove the existing image path and you can put the new image as shown in below

													
import LoaderImage from '../../../assets/img/loader.svg';

<img src={LoaderImage} className="loader-img" alt="Loader"/>

									

Vite allows you to have more control over your project's configuration by extending the default configuration with vite.config.js or vite.config.ts. These are located in the project's base root directory.

the file vite.config.js is the stands for configuration management tools. and we mostly use for to configure the root routing path

Note: While you are create your own project need to change the base path accordingly.

Please follow the below to steps change Horizontal as default

Step:1

Open your index.html (path:src\index.html)file and add the following code mentioned below. This will sets the layout style to horizontal for the entire document.

			<body class="main-body app ltr horizontal">; //change the sidebar-mini class to horizontal 
		
		

Step:2

Open your App.jsx (path:src/layouts/App.jsx)file and add the following code mentioned below. This will sets the layout style to horizontal for the entire document.

					<div className="main-content horizontal-content">  // replace the class to horizontal-content	
					<div className="main-container container">  // replace the class container-fluid to  container		
					<div className="side-app container">  // add the class  container	
				
				

Step: 3

Open your sidebar.jsx(path:src\layouts\layoutcomponents\sidebar.jsx) file and add the following code mentioned below.

			<aside className="app-sidebar horizontal-main"> //add the class horizontal-main
		
		

Step: 3

Open your Header.jsx(path:src\layouts\layoutcomponents\header.jsx) file and add the following code mentioned below.

		<Navbar className="main-header  side-header sticky nav nav-item hor-header"> //add the class hor-header
		<div className="main-container container"> //replace the class container-fluid to  container	
		
		

Step: 4

Open your switcher.jsx(path:src\layouts\layoutcomponents\switcher.jsx) file and add the following code mentioned below.

		<input type="radio" name="onoffswitch15" id="myonoffswitch35" className="onoffswitch2-checkbox"  defaultChecked
		onClick={() => SwitcherAction('horizontalclickmenu')} /> // give a property default Checked to this input, 
		
		Note:  make sure to remove defaultChecked from the vertical input.
		

Step: 5

Open your reducer.jsx(path:\src\common\redux\reducer.jsx) file and add the following code mentioned below.

		 let vertail:any = document.querySelector("#myonoffswitch35") as HTMLInputElement 
		vertail.checked = true;  //Vertail //change the id #myonoffswitch34 to #myonoffswitch35
		

Please follow the below to steps change Rtl version as default

Step: 1

Open your App.jsx (path:src\layouts\App.jsx)file and add the following code mentioned below. This will sets the layout style to rtl for the entire document.

 document.querySelector("body")?.classList.add("rtl",  "bg-primary-transparent", "error-page1", "main-body", "error-2",);
  //change the ltr class to rtl 	
			  

Step: 2

Open your switcherdata.jsx(path:src\layouts\layoutcomponents\switcherdata.jsx) file and add the following code mentioned below.

		<input type="radio" name="onoffswitch25" id="myonoffswitch55" className="onoffswitch2-checkbox"
		 onClick={() => { SwitcherAction("RTL") }} defaultChecked /> // give a property default Checked to this input, 
		
		Note:  make sure to remove defaultChecked from the ltr input.