Azea – TypeScript React Admin & Dashboard Template

Note:-

Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Dark style..etc.

FAQS

How to Change Font Style ?

Step 1:

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

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import in to styles.scss file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in style.scss

Example:

Step 3:

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

Example:


body {
font-size: 1rem;
font-family: "Roboto", sans-serif;
font-weight: 400;
color: #{$color};
background-color: #{$background};
line-height: 1.5;
text-align: start;
overflow-x: clip;
padding: 0;
margin: 0;
}

How to change Menu icons ?

Note: Here we are using Svg icon as a default icon,

If you want to change the icon follow the steps as below

Step 1 :

Refer to the below given example we are attaching the svg in "icons: "

Step 2 :

If you want to change the icon visit the path follows src/layout/Sidebar/SidebarData.tsx and replace the existing icon with a new icon to change the menu icon in the sidebar


Note : here we changed it in to Fontawsome icon
{
menutitle: "MAIN",
id: 1,
Items: [
{
path: `${import.meta.env.BASE_URL}dashboard`,
icon: (<i className="side-menu__icon fa fa-home" aria-hidden="true"></i>),   Replace the existing icon with a new icon.
type: 'link',
active: false,
selected: false,
title: 'Dashboard'
},
]
},

How to Change Logo ?

For changing the logo in your template follow the below step to make the necessary changes.

step: 1

go to sidebar.tsx and change the images in the following path as mentioned below

How to Enable RTL Version?

Please follow the below steps to enable RTL Version

Step 1 :

To enable RTL Version you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code rtl as shown in below



// RTL add class 
document.querySelector('body')?.classList.add("rtl");

// RTL remove class
document.querySelector('body')?.classList.remove('ltr');

How to Enable Horizontal Menu Click?

Please follow the below steps to enable Horizontal Menu Click

To enable Horizontal Menu Click you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below



// Horizontal Menu Click add class 

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

//  Horizontal Menu Click remove class

document.querySelector("body")?.classList.remove("sidebar-mini");
document.querySelector(".header")?.classList.remove("app-header");
document.querySelector(".main-content")?.classList.remove("app-content");
document.querySelector(".main-container")?.classList.remove("container-fluid");
document.querySelector("body")?.classList.remove("sidenav-toggled");
document.querySelector("body")?.classList.remove("horizontal-hover");

How to Enable Horizontal Hover Click?

Please follow the below steps to enable Horizontal Hover Click

To enable Horizontal Hover Click Style you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below



// Horizontal Hover Click add class 

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

//  Horizontal Hover Click remove class

document.querySelector("#slide-left")?.classList.remove("d-none");
document.querySelector("#slide-right")?.classList.remove("d-none");
document.querySelector(".main-content")?.classList.remove("app-content");
document.querySelector(".main-container")?.classList.remove("container-fluid");
document.querySelector(".header")?.classList.remove("app-header");
document.querySelector("body")?.classList.remove("sidebar-mini");
document.querySelector("body")?.classList.remove("sidenav-toggled");

How to Enable Dark Theme?

Please follow the below steps to enable Dark Theme

To enable Dark Theme you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


/*Dark-mode adding class*/
document.querySelector('body')?.classList.add('dark-mode');
/* Dark mode remove Class */
document.querySelector('body')?.classList.remove('light-mode');
document.querySelector('body')?.classList.remove('light-menu');
document.querySelector('body')?.classList.remove('color-menu'); 
document.querySelector('body')?.classList.remove('dark-menu');
document.querySelector('body')?.classList.remove('light-header');
document.querySelector('body')?.classList.remove('color-header');
document.querySelector('body')?.classList.remove('dark-header');

How to Enable Primary Color?

Please follow the below steps to enable Dark Theme

Step 1 :

To enable Primary Color you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


export const ThemePrimaryColor = () => {
const [state, updateState] = useState("#664dc9");
const handleInput = (e) => {
let { r, g, b }: any = hexToRgb(e.target.value);
updateState(e.target.value);
const rgbaValue = `rgba(${r}, ${g}, ${b})`;
const rgbaValue005 = `rgba(${r}, ${g}, ${b}, 0.05)`;
const rgbaValue1 = `rgba(${r}, ${g}, ${b}, 0.1)`;
const rgbaValue2 = `rgba(${r}, ${g}, ${b}, 0.2)`;
const rgbaValue3 = `rgba(${r}, ${g}, ${b}, 0.3)`;
const rgbaValue4 = `rgba(${r}, ${g}, ${b}, 0.4)`;
const rgbaValue5 = `rgba(${r}, ${g}, ${b}, 0.5)`;
const rgbaValue6 = `rgba(${r}, ${g}, ${b}, 0.6)`;
const rgbaValue7 = `rgba(${r}, ${g}, ${b}, 0.7)`;
const rgbaValue8 = `rgba(${r}, ${g}, ${b}, 0.8)`;
const rgbaValue9 = `rgba(${r}, ${g}, ${b}, 0.9)`;
const rgbaValue10 = `rgba(${r}, ${g}, ${b}, 0.58)`;
const rgbaValue11 = `rgba(${r}, ${g}, ${b}, 1)`;

document.documentElement.style.setProperty("--primary-bg-color", rgbaValue);
document.documentElement.style.setProperty("--primary005", rgbaValue005);
document.documentElement.style.setProperty("--primary01", rgbaValue1);
document.documentElement.style.setProperty("--primary02", rgbaValue2);
document.documentElement.style.setProperty("--primary03", rgbaValue3);
document.documentElement.style.setProperty("--primary04", rgbaValue4);
document.documentElement.style.setProperty("--primary05", rgbaValue5);
document.documentElement.style.setProperty("--primary06", rgbaValue6);
document.documentElement.style.setProperty("--primary07", rgbaValue7);
document.documentElement.style.setProperty("--primary08", rgbaValue8);
document.documentElement.style.setProperty("--primary09", rgbaValue9);
document.documentElement.style.setProperty("--primary-bg-color", rgbaValue11);
document.documentElement.style.setProperty("--primary-bg-hover", rgbaValue10);
document.documentElement.style.setProperty("--primary-bg-border", rgbaValue11);

localStorage.setItem("Azeaprimarybordercolor", rgbaValue11);
localStorage.setItem("Azeaprimarycolor", rgbaValue11);
localStorage.setItem("Azeaprimaryhovercolor", rgbaValue10);
localStorage.setItem("AzealightMode", "true");

};														  
return (
<div className="ThemePrimaryColor">
<ColorPicker onChange={handleInput} value={state} />
<div className="my-bootstrap-component" style={{ backgroundColor: 'var rgba(--primary-color)' }}>
												  
</div>
</div>
);
};

Step 2 :

To enable Primary Color you have to open Switcher.tsx which is located at (src/layout/Switcher/Switcher.tsx) file and paste the code as shown in below


import * as SwitcherData from './Data/SwitcherData';

	<SwitcherData.ThemePrimaryColor />

How to Enable Background Color?

Please follow the below steps to enable Dark Theme

Step 1 :

To enable Background Color you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


export const Backgroundcolor = () => {
 const [state, updateState] = useState("#1a1c32");
 const handleInput = (e) => {
   let { r, g, b }: any = hexToRgb(e.target.value);
   updateState(e.target.value);
   const rgbaValue = `rgba(${r}, ${g}, ${b})`;
   const rgbaValue10 = `rgba(${r}, ${g}, ${b}, 0.87)`;
   const rgbaValue11 = `rgba(${r}, ${g}, ${b},1)`;
   const rgbaValue005 = `rgba(${r}, ${g}, ${b}, 0.05)`;
   const rgbaValue1 = `rgba(${r}, ${g}, ${b}, 0.1)`;
   const rgbaValue2 = `rgba(${r}, ${g}, ${b}, 0.2)`;
   const rgbaValue3 = `rgba(${r}, ${g}, ${b}, 0.3)`;
   const rgbaValue4 = `rgba(${r}, ${g}, ${b}, 0.4)`;
   const rgbaValue5 = `rgba(${r}, ${g}, ${b}, 0.5)`;
   const rgbaValue6 = `rgba(${r}, ${g}, ${b}, 0.6)`;
   const rgbaValue7 = `rgba(${r}, ${g}, ${b}, 0.7)`;
   const rgbaValue8 = `rgba(${r}, ${g}, ${b}, 0.8)`;
   const rgbaValue9 = `rgba(${r}, ${g}, ${b}, 0.9)`;
   document.documentElement.style.setProperty("--dark-body", rgbaValue10);
   document.documentElement.style.setProperty("--dark-theme", rgbaValue11);
   document.documentElement.style.setProperty("--primary01", rgbaValue1);
   document.documentElement.style.setProperty("--primary02", rgbaValue2);
   document.documentElement.style.setProperty("--primary03", rgbaValue3);
   document.documentElement.style.setProperty("--primary04", rgbaValue4);
   document.documentElement.style.setProperty("--primary05", rgbaValue5);
   document.documentElement.style.setProperty("--primary06", rgbaValue6);
   document.documentElement.style.setProperty("--primary07", rgbaValue7);
   document.documentElement.style.setProperty("--primary08", rgbaValue8);
   document.documentElement.style.setProperty("--primary09", rgbaValue9);
   document.documentElement.style.setProperty("--primary005", rgbaValue005);
   localStorage.setItem("Azeabgcolor", rgbaValue10);
   localStorage.setItem("Azeathemecolor", rgbaValue11);
   localStorage.setItem("AzeadarkMode", "true");
   document.querySelector('body')?.classList.add('dark-mode');
   document.querySelector('body')?.classList.remove('light-mode');
   document.querySelector('body')?.classList.remove('light-menu');
   document.querySelector('body')?.classList.remove('color-menu');
   document.querySelector('body')?.classList.remove('dark-menu');
   document.querySelector('body')?.classList.remove('light-header');
   document.querySelector('body')?.classList.remove('color-header');
   document.querySelector('body')?.classList.remove('dark-header');
   localStorage.removeItem('AzealightMode');
   localStorage.removeItem('Azealightheader');
   localStorage.removeItem('Azealighmenu');
  
 };
 return (
   <div className="ThemePrimaryColor">
	 <ColorPicker onChange={handleInput} value={state} />
	 <div className="my-bootstrap-component" style={{ backgroundColor: 'var rgba(--primary-color)' }}>
	   {/* Content of the Bootstrap component */}
	 </div>
   </div>
 );
};

Step 2 :

To enable Primary Color you have to open Switcher.tsx which is located at (src/layout/Switcher/Switcher.tsx) file and paste the code as shown in below


import * as SwitcherData from './Data/SwitcherData';

	<SwitcherData.BackgroundColor />

How to Enable Color Header?

Please follow the below steps to enable Color Header

To enable Color Header you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


	  
	  //Color Header adding class
		document.querySelector("body")?.classList.add("default-menu", "color-header");

	   //Color Header remove class
	   document.querySelector("body")?.classList.remove("dark-header");
	   document.querySelector("body")?.classList.remove("light-header");
	   document.querySelector("body")?.classList.remove("gradient-header");

How to Enable Dark Header?

Please follow the below steps to enable Dark Header

To enable Dark Header you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


	  
	  //Dark Header adding class
	  document.querySelector("body")?.classList.add("default-menu", "dark-header");

	   //Dark Header remove class
	   document.querySelector("body")?.classList.remove("light-header");
	   document.querySelector("body")?.classList.remove("color-header");
	   document.querySelector("body")?.classList.remove("gradient-header");

How to Enable Gradient Header?

Please follow the below steps to enable Gradient Header

To enable Gradient Header you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


	  
	  //Gradient Header adding class
	  document.querySelector("body")?.classList.add("default-menu", "gradient-header");

	   //Gradient Header remove class
	   document.querySelector("body")?.classList.remove("dark-header");
	   document.querySelector("body")?.classList.remove("color-header");
	   document.querySelector("body")?.classList.remove("light-header");

How to Enable Color Menu?

Please follow the below steps to enable Color Menu

To enable Color Menu you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


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

	   //Color Menu remove class
	   document.querySelector("body")?.classList.remove("dark-menu");
	   document.querySelector("body")?.classList.remove("light-menu");
	   document.querySelector("body")?.classList.remove("gradient-menu");

How to Enable Dark Menu?

Please follow the below steps to enable Dark Menu

To enable Dark Menu you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


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

	   //Dark Menu remove class
	   document.querySelector("body")?.classList.remove("color-menu");
	   document.querySelector("body")?.classList.remove("light-menu");
	   document.querySelector("body")?.classList.remove("gradient-menu");

How to Enable Gradient Menu?

Please follow the below steps to enable Gradient Menu

To enable Gradient Menu you have to open SwitcherData.tsx which is loacted at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below


	  
	  //Gradient Menu adding class
	  document.querySelector("body")?.classList.add("gradient-menu");

	   //Gradient Menu remove class
	   document.querySelector("body")?.classList.remove("dark-menu");
	   document.querySelector("body")?.classList.remove("light-menu");
	   document.querySelector("body")?.classList.remove("color-menu");

How to Enable Boxed Version?

Please follow the below steps to enable Boxed Version

To enable Boxed Version you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below



/*Boxed layout styles adding class*/
 document.querySelector('body')?.classList.add('layout-boxed');

/*Boxed layout styles remove class*/
document.querySelector('body')?.classList.remove('layout-fullwidth');

How to Enable Scrollable Version?

Please follow the below steps to enable Scrollable Version

To enable Scrollable Version you have to open SwitcherData.tsx which is located at (src/layout/Switcher/Data/SwitcherData.tsx)open file and paste the code as shown in below




/*Scrollable layout positions adding class*/
document.querySelector("body")?.classList.add("scrollable-layout");

/*Scrollable layout positions remove class*/
document.querySelector("body")?.classList.remove("fixed-layout");
document.querySelector("body")?.classList.remove("layout-fullwidth");

How to remove the switcher

Please follow the below steps to remove Switcher

Step: 1

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


	
								{/* Switcher Open */}
	
	<className="d-flex" onClick={() => SwitcherIcon()}>
	<svg xmlns="http://www.w3.org/2000/svg" className="header-icon fa-spin" width="24"
	height="24" viewBox="0 0 24 24"></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


	
const SwitcherIcon = () => {
document.querySelector(".demo_changer")?.classList.add("active");
let demoChanger = document.querySelector(".demo_changer") as HTMLInputElement
demoChanger.style.right = "0px";
 }

Step: 3

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


	
	import Switcher from './../layouts/switcher/switcher';
	
	<Switcher />

Theme Styles

How to Change Primary Color for Light & Dark Themes?

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.

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 _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.

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 _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.