Step 1:

Go To style.scss (assets/scss/style.scss )

if you want to change another font-family Go to the site Google Fonts And Select 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.scss(assets/scss/custom/_custom.scss)

Example:

body {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: $color;
	text-align: left;
	background: #f2f6f9;
}
	

Go To "assets/images/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.

To enable the Darktheme version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

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

document.querySelector("body")?.classList.remove("light-mode"); //while dark mode is getting active light mode should need to be removed. 

To enable the Lighttheme version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

document.querySelector("body")?.classList.add("light-mode");

document.querySelector("body")?.classList.remove("dark-mode"); //while light mode is getting active dark mode should need to be removed. 

To enable the colorheader version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

document.querySelector("body")?.classList.add("color-header");   // active class

document.querySelector("body")?.classList.remove("dark-header");  // remove classes
document.querySelector("body")?.classList.remove("light-header");   // remove classes

To enable the Darkheader version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

document.querySelector("body")?.classList.add("dark-header");   // active class

document.querySelector("body")?.classList.remove("color-header");  // remove classes
document.querySelector("body")?.classList.remove("light-header");   // remove classes

To enable the Lightheader version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

document.querySelector("body")?.classList.add("light-header");   // active class

document.querySelector("body")?.classList.remove("color-header");  // remove classes
document.querySelector("body")?.classList.remove("dark-header");   // remove classes

To enable the Lightmenu version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

document.querySelector("body")?.classList.add("light-menu");   // active class

document.querySelector("body")?.classList.remove("color-menu");   // remove classes
document.querySelector("body")?.classList.remove("dark-menu");   // remove classes

To enable the colormenu version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

document.querySelector("body")?.classList.add("color-menu");   // active class

document.querySelector("body")?.classList.remove("light-menu");   // remove classes
document.querySelector("body")?.classList.remove("dark-menu");   // remove classes

To enable the darkmenu version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

document.querySelector("body")?.classList.add("dark-menu");   // active class

document.querySelector("body")?.classList.remove("light-menu");   // remove classes
document.querySelector("body")?.classList.remove("color-menu");   // remove classes

To enable the Boxed-Layout version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

document.querySelector("body")?.classList.add("layout-boxed");  // active class

document.querySelector("body")?.classList.remove("layout-fullwidth");  // remove classes

To enable the Scrollable-Layout version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

document.querySelector("body")?.classList.add("scrollable-layout");  // active class

document.querySelector("body")?.classList.remove("fixed-layout");  // remove classes

To enable the Body Style version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

document.querySelector("body")?.classList.add("body-style1")   // active class

document.querySelector("body")?.classList.remove("body-default")  // remove classes

To enable the Horizontal layout version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

Active classes ;

document.querySelector("body")?.classList.add("horizontal");
document.querySelector(".app-header")?.classList.add("hor-header");
document.querySelector(".main-content")?.classList.add("horizontal-content");
document.querySelector(".app-sidebar")?.classList.add("horizontal-main");

	

To enable the Horizontal Hover layout version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.tsx)file . and enable the following code for (.body) class.

Active classes ;

document.querySelector("body")?.classList.add("horizontal");

document.querySelector("body")?.classList.add("horizontal-hover");
document.querySelector(".main-content")?.classList.add("horizontal-content");
document.querySelector(".app-header")?.classList.add("hor-header");
document.querySelector(".app-sidebar")?.classList.add("horizontal-main");

	

Please follow the bellow steps to change Primary Color

Step 1 :

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

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Please follow the bellow 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 )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Please follow the bellow 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 )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

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 )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Please follow the bellow steps to change Dark body Color

Step 1 :

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

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Please follow the bellow steps to change Dark Theme Color

Step 1 :

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

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Please follow the below steps to change Dark default Color ,border color ,and shadow color

Step 1 :

To change Dark default Color ,border color ,and shadow color you have to open _custom.scss file in scss folder and replace what color you want as shown in below

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Please follow the below steps to remove Switcher

Step: 1

To remove Switcher you have to open Header.tsx (src/shared/Components/Header/Header.tsx) file and there itself you can remove or comments for switcher code as shown in below

{/* Switcher Open */}

<Link to="#" className="demo-icon new nav-link p-0 m-2" onClick={() => swichermainright()} >
<svg className="header-icon fa-spin"  x="1008"  y="1248"  viewBox="0 0 24 24" height="24" width="24" preserveAspectRatio="xMidYMid meet" focusable="false">
  <path opacity=".3"
	d="M19.28,8.6 L18.58,7.39 L17.31,7.9 L16.25,8.33 L15.34,7.63 C14.95,7.33 14.54,7.09 14.11,6.92 L13.05,6.49 L12.89,5.36 L12.7,4 L11.3,4 L11.11,5.35 L10.95,
	6.48 L9.89,6.92 C9.48,7.09 9.07,7.33 8.64,7.65 L7.74,8.33 L6.69,7.91 L5.42,7.39 L4.72,8.6 L5.8,9.44 L6.69,10.14 L6.55,11.27 C6.52,11.57 6.5,11.8 6.5,12 C6.5,12.2 6.52,
	12.43 6.55,12.73 L6.69,13.86 L5.8,14.56 L4.72,15.4 L5.42,16.61 L6.69,16.1 L7.75,15.67 L8.66,16.37 C9.05,16.67 9.46,16.91 9.89,17.08 L10.95,17.51 L11.11,18.64 L11.3,
	20 L12.69,20 L12.88,18.65 L13.04,17.52 L14.1,17.09 C14.51,16.92 14.92,16.68 15.35,16.36 L16.25,15.68 L17.29,16.1 L18.56,16.61 L19.26,15.4 L18.18,
	14.56 L17.29,13.86 L17.43,12.73 C17.47,12.42 17.48,12.21 17.48,12 C17.48,11.79 17.46,11.57 17.43,11.27 L17.29,10.14 L18.18,9.44 L19.28,8.6 Z M12,16 C9.79,16 8,14.21 8,12 C8,
	9.79 9.79,8 12,8 C14.21,8 16,9.79 16,12 C16,14.21 14.21,16 12,16 Z">
</path>
  <path d="M19.43,12.98 C19.47,12.66 19.5,12.34 19.5,12 C19.5,11.66 19.47,11.34 19.43,11.02 L21.54,9.37 C21.73,9.22 21.78,8.95 21.66,8.73 L19.66,5.27 C19.57,5.11 19.4,
  5.02 19.22,5.02 C19.16,5.02 19.1,5.03 19.05,5.05 L16.56,6.05 C16.04,5.65 15.48,5.32 14.87,5.07 L14.49,2.42 C14.46,2.18 14.25,2 14,2 L10,2 C9.75,2 9.54,2.18 9.51,2.42 L9.13,5.07 C8.52,
  5.32 7.96,5.66 7.44,6.05 L4.95,5.05 C4.89,5.03 4.83,5.02 4.77,5.02 C4.6,5.02 4.43,5.11 4.34,5.27 L2.34,8.73 C2.21,8.95 2.27,9.22 2.46,9.37 L4.57,11.02 C4.53,11.34 4.5,11.67 4.5,
  12 C4.5,12.33 4.53,12.66 4.57,12.98 L2.46,14.63 C2.27,14.78 2.22,15.05 2.34,15.27 L4.34,18.73 C4.43,18.89 4.6,18.98 4.78,18.98 C4.84,18.98 4.9,18.97 4.95,18.95 L7.44,17.95 C7.96,
  18.35 8.52,18.68 9.13,18.93 L9.51,21.58 C9.54,21.82 9.75,22 10,22 L14,22 C14.25,22 14.46,21.82 14.49,21.58 L14.87,18.93 C15.48,18.68 16.04,18.34 16.56,17.95 L19.05,18.95 C19.11,18.97 19.17,
  18.98 19.23,18.98 C19.4,18.98 19.57,18.89 19.66,18.73 L21.66,15.27 C21.78,15.05 21.73,14.78 21.54,14.63 L19.43,12.98 Z M17.45,11.27 C17.49,11.58 17.5,11.79 17.5,12 C17.5,12.21 17.48,
  12.43 17.45,12.73 L17.31,13.86 L18.2,14.56 L19.28,15.4 L18.58,16.61 L17.31,16.1 L16.27,15.68 L15.37,16.36 C14.94,16.68 14.53,16.92 14.12,17.09 L13.06,17.52 L12.9,18.65 L12.7,20 L11.3,
  20 L11.11,18.65 L10.95,17.52 L9.89,17.09 C9.46,16.91 9.06,16.68 8.66,16.38 L7.75,15.68 L6.69,16.11 L5.42,16.62 L4.72,15.41 L5.8,14.57 L6.69,13.87 L6.55,12.74 C6.52,12.43 6.5,12.2 6.5,
  12 C6.5,11.8 6.52,11.57 6.55,11.27 L6.69,10.14 L5.8,9.44 L4.72,8.6 L5.42,7.39 L6.69,7.9 L7.73,8.32 L8.63,7.64 C9.06,7.32 9.47,7.08 9.88,6.91 L10.94,6.48 L11.1,5.35 L11.3,4 L12.69,4 L12.88,
  5.35 L13.04,6.48 L14.1,6.91 C14.53,7.09 14.93,7.32 15.33,7.62 L16.24,8.32 L17.3,7.89 L18.57,7.38 L19.27,8.59 L18.2,9.44 L17.31,10.14 L17.45,11.27 Z M12,8 C9.79,8 8,9.79 8,12 C8,14.21 9.79,
  16 12,16 C14.21,16 16,14.21 16,12 C16,9.79 14.21,8 12,8 Z M12,14 C10.9,14 10,13.1 10,12 C10,10.9 10.9,10 12,10 C13.1,10 14,10.9 14,12 C14,13.1 13.1,14 12,14 Z"></path>
</svg>
</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

//swichermainright

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

									

Step: 3

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

import { Switcher } from '../Components/Switcher/Switcher';

<Switcher />

									

Please follow the below steps to remove Loader

To remove Loader you have to open the Routing page Router.tsx (src/shared/Router/Router.tsx) 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.tsx (src/shared/Components/Loader/Loader.tsx) file and remove the existing image path and you can put the new image as shown in below

													
import loader from "../../../assets/images/svgs/loader.svg"

<img src={loader}/>

									

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

the file vite.config.ts 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.