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