##### FAQS

##### Gulp Related

#### How to use project without Scss & Gulp ?

###### If you don't want to use scss files, if you want to use only css files please follow below steps.

###### Step 1 :

If you don't want to use scss files,you are in no need of gulp and other related files & folders so please remove below shown files

`Html/src folder`
`Html/dist/assets/css/styles.css.map file`
`Html/dist/assets/css/styles.min.css file`
`Html/gulpfile.js file`
`Html/package-lock.json file`
`Html/package.json file`
`Html/node_modules folder`

###### Step 2 :

Remove `scss` folder in dist folder and `.map` file and `css` file in css folder in dist folder `Path:Html/dist/assets/scss`

You can simply use `dist` folder with only css, or can use by renaming it😊.

#### How to use gulp for production purpose without partials?

###### If you want gulp for production purpose without partials please follow below steps.

###### Step 1 :

If you don't want to use `src` & `dist` folders.if you want only one folder with gulp and power of scss, please remove below shown folder

`Html/src`

###### Step 2 :

Please replace code in gulpfile.js `Path:Html/gulpfile.js` file with below shown code

    let browsersync = require("browser-sync");
    	let gulp = require("gulp");
    	let rename = require("gulp-rename");
    	let gulpsass = require("gulp-sass");
    	let sass = require("sass");
    	let autoprefixer = require("gulp-autoprefixer");
    	let sourcemaps = require("gulp-sourcemaps");
    	let cleanCSS = require("gulp-clean-css");
    	const postcss = require("gulp-postcss");
    	const tailwindcss = require("tailwindcss");
    	let sass$ = gulpsass(sass);
    	let browsersync$ = browsersync.create();
    	const isSourceMap = true;
    	const sourceMapWrite = isSourceMap ? "./" : false;
    	function browsersyncFn(callback) {
    		var baseDir = "./dist";
    		browsersync$.init({
    		server: {
    			baseDir: [baseDir, baseDir + "/html"], // Specify the base path of the project
    			// index: "html/index.html"										// Has to specify the initial page in case not the index.html
    		},
    		port: 1113, // Used to change the port number
    		// tunnel: 'technology', 											// Attempt to use the URL https://text.loca.lt
    		});
    		callback();
    	}
    	function browsersyncReload(callback) {
    		browsersync$.reload();
    		callback();
    	}
    	function watch() {
    		// Below  are the files which will be watched and to skip watching files use '!' before the path.
    		gulp.watch(
    		["./dist/assets/scss/**/*.scss", "!./dist/assets/switcher/*.scss"],
    		gulp.series("scss", browsersyncReload)
    		);
    		gulp.watch(
    		["./dist/html/*.html"],gulp.series("build_tailwind",browsersyncReload)
    		);
    	}
    	function scss(callback) {
    		// SCSS path where code was written
    		var scssFiles = "./dist/assets/scss/**/*.scss";
    		var cssDest = "./dist/assets/css/";
    		// Normal file
    		gulp
    		.src(scssFiles)
    		.pipe(sourcemaps.init()) // To create map file we should need to initiliaze.
    		.pipe(sass$.sync().on("error", sass$.logError)) // To check any error with sass sync
    		.pipe(postcss([tailwindcss(), autoprefixer]))
    		.pipe(gulp.dest(cssDest))
    		//  Minified file
    		gulp
    		.src(scssFiles)
    		.pipe(sourcemaps.init()) // To create map file we should need to initiliaze.
    		.pipe(sass$.sync().on("error", sass$.logError)) // To check any error with sass sync
    		.pipe(postcss([tailwindcss(), autoprefixer]))
    		.pipe(gulp.dest(cssDest))
    		.pipe(cleanCSS({ debug: true }, (details) => {}))
    		.pipe(
    			rename({
    			suffix: ".min",
    			})
    		)
    		.pipe(sourcemaps.write(sourceMapWrite)) // To create map file
    		.pipe(gulp.dest(cssDest))
    		return callback();
    	}

    	// Build Tailwind CSS
    	function build_tailwind() {
    		var scssFiles = "./dist/assets/scss/**/*.scss";
    		var cssDest = "./dist/assets/css";
    		return gulp
    		.src(scssFiles)
    		.pipe(sass$.sync().on("error", sass$.logError))
    		.pipe(
    			postcss([
    			tailwindcss(),
    			autoprefixer,
    			// require("tailwindcss"),
    			// require("autoprefixer"),
    			])
    		)
    		.pipe(gulp.dest(cssDest))
    		.pipe(browsersync.stream());
    	}
    	const build = gulp.series(gulp.parallel(scss), gulp.parallel(scss));
    	const defaults = gulp.series(
    		gulp.parallel(watch, scss, build_tailwind, browsersyncFn),
    		gulp.parallel(scss, build_tailwind, browsersyncFn),
    	);
    	// Export tasks
    	exports.browsersyncReload = browsersyncReload;
    	exports.browsersyncFn = browsersyncFn;
    	exports.scss = scss;
    	exports.build_tailwind = build_tailwind;
    	exports.watch = watch;
    	exports.build = build;
    	exports.default = defaults;

###### Step 3 :

Open terminal and run command `npm i`

###### Step 4 :

Finally to run the project run command `gulp` from the terminal,it will open the project in browser,if you make any changes in the project the gulp file watches for it and update the project.

##### General Style

#### How to Change Font Style ?

##### Step 1:

Go To style.scss (src/assets/scss/styles.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 tailwind config file inplace of old font

###### Example:

    fontFamily: {
    	inter: ["Inter", "sans-serif"], //place your font here
    },

##### Step 4:

And add the Your Selected font-family to body that is font-inter in custom.scss file (rootpath :- assets/scss/tailwind/_custom.scss) file inplace of old font

###### Example:

    body {
     @apply bg-bodybg h-full text-gray-600 dark:text-white m-0 font-inter font-normal text-sm relative;
    }

#### How to change Menu icons ?

###### By default menu icons are in the form of icons if you want to change icons please follow below steps

###### Step 1 :

To change Menu icons, open menu.html page `Path:src/html/partials/menu.html` and go through app-sidebar section, in that section you will find `i`tag, there you can replace previous icon with your icon. Example as shown in below

#### How to Change Logo ?

Go To "src/assets/img/brand-logos" 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 clear LocalStorage(cookie)

#### How to clear LocalStorage (cookie)?

###### Step1:

Open custom-switcher.js file `assets/js/custom-switcher.js`

To clear LocalStorage loading functions you need to remove localStorageBackup(); function in custom-switcher.js as shown below

    function localStorageBackup() {
    function localStorageBackup() {
    	// if there is a value stored, update color picker and background color
    	// Used to retrive the data from local storage
    	if (localStorage.primaryRGB) {
    		if (document.querySelector(".theme-container-primary")) {
    		document.querySelector(".theme-container-primary").value =
    			localStorage.primaryRGB;
    		}
    		document
    		.querySelector("html")
    		.style.setProperty("--color-primary", localStorage.primaryRGB1);
    		document
    		.querySelector("html")
    		.style.setProperty("--color-primary-rgb", localStorage.primaryRGB);

    		if (localStorage.primaryRGB == "172, 172, 80") {
    		if (document.querySelector("#switcher-primary2")) {
    			document.querySelector("#switcher-primary2").checked = true;
    		}
    		}
    		if (localStorage.primaryRGB == "58, 88, 146") {
    		if (document.querySelector("#switcher-primary")) {
    			document.querySelector("#switcher-primary").checked = true;
    		}
    		}
    		if (localStorage.primaryRGB == "92, 144, 163") {
    		if ( document.querySelector("#switcher-primary1")) {
    			document.querySelector("#switcher-primary1").checked = true;
    		}
    		}
    		if (localStorage.primaryRGB == "165, 94, 131") {
    		if ( document.querySelector("#switcher-primary3") ) {
    			document.querySelector("#switcher-primary3").checked = true;
    		}
    		}
    		if (localStorage.primaryRGB == "87, 68, 117") {
    		if (document.querySelector("#switcher-primary4")) {
    			document.querySelector("#switcher-primary4").checked = true;
    		}
    		}
    	}
    	if (localStorage.bodyBgRGB) {
    		if (document.querySelector(".theme-container-background")) {
    		document.querySelector(".theme-container-background").value =
    			localStorage.bodyBgRGB;
    		}
    		document
    		.querySelector("html")
    		.style.setProperty("--body-bg", localStorage.bodyBgRGB);
    		document
    		.querySelector("html")
    		.style.setProperty("--dark-bg", localStorage.darkBgRGB);
    		let html = document.querySelector("html");
    		html.classList.add("dark");
    		html.classList.remove("light");
    		html.setAttribute("data-menu-styles", "dark");
    		html.setAttribute("data-header-styles", "dark");
    		if (
    		!document.querySelector(".authentication-page") &&
    		!document.querySelector(".cover1")
    		) {
    		document.querySelector("#switcher-dark-theme").checked = true;
    		}

    		if (localStorage.bodyBgRGB == "64 76 107") {
    		if (
    			document.querySelector("#switcher-background")
    		) {
    			document.querySelector("#switcher-background").checked = true;
    		}
    		}
    		if (localStorage.bodyBgRGB == "95 107 64") {
    		if (document.querySelector("#switcher-background1")) {
    			document.querySelector("#switcher-background1").checked = true;
    		}
    		}
    		if (localStorage.bodyBgRGB == "93 64 107") {
    		if (document.querySelector("#switcher-background2")) {
    			document.querySelector("#switcher-background2").checked = true;
    		}
    		}
    		if (localStorage.bodyBgRGB == "64 101 107") {
    		if (document.querySelector("#switcher-background3")) {
    			document.querySelector("#switcher-background3").checked = true;
    		}
    		}
    		if (localStorage.bodyBgRGB == "107 64 64") {
    		if (document.querySelector("#switcher-background4")) {
    			document.querySelector("#switcher-background4").checked = true;
    		}
    		}
    	}
    	if (localStorage.Syntodarktheme) {
    		let html = document.querySelector("html");
    		html.classList.add("dark");
    		html.classList.remove("light");
    	}
    	if (localStorage.Syntortl) {
    		let html = document.querySelector("html");
    		html.setAttribute("dir", "rtl");
    	}
    	if (localStorage.Syntolayout) {
    		let html = document.querySelector("html");
    		let layoutValue = localStorage.getItem("Syntolayout");
    		switch (layoutValue) {
    		case "vertical":
    			html.setAttribute("data-nav-layout", "vertical");
    			break;
    		case "horizontal":
    			html.setAttribute("data-nav-layout", "horizontal");
    			let menuNav = document.querySelector(".main-menu");
    			let mainContainer1 = document.querySelector(".main-sidebar");
    			setTimeout(() => {
    			if (
    				!document.querySelector(".authentication-page") &&
    				!document.querySelector(".cover1")
    			) {
    				if (menuNav.scrollWidth < mainContainer1.offsetWidth) {
    				document.getElementById("slide-right").classList.add("hidden");
    				document.getElementById("slide-left").classList.add("hidden");
    				}
    			}
    			}, 500);
    			break;
    		}
    	}
    	if (localStorage.Syntoverticalstyles) {
    		let html = document.querySelector("html");
    		let verticalStyles = localStorage.getItem("Syntoverticalstyles");
    		switch (verticalStyles) {
    		case "closed":
    			html.setAttribute("data-vertical-style", "closed");
    			html.removeAttribute("data-nav-style");
    			localStorage.removeItem("Syntonavstyles");
    			break;
    		case "icontext":
    			html.setAttribute("data-vertical-style", "icontext");
    			html.removeAttribute("data-nav-style");
    			localStorage.removeItem("Syntonavstyles");
    			break;
    		case "overlay":
    			html.setAttribute("data-vertical-style", "overlay");
    			html.removeAttribute("data-nav-style");
    			localStorage.removeItem("Syntonavstyles");
    			break;
    		case "detached":
    			html.setAttribute("data-vertical-style", "detached");
    			html.removeAttribute("data-nav-style");
    			localStorage.removeItem("Syntonavstyles");
    			break;
    		case "doublemenu":
    			html.setAttribute("data-vertical-style", "doublemenu");
    			html.removeAttribute("data-nav-style");
    			localStorage.removeItem("Syntonavstyles");
    			break;
    		}
    	}
    	if (localStorage.Syntonavstyles) {
    		let html = document.querySelector("html");
    		let navStyles = localStorage.getItem("Syntonavstyles");
    		switch (navStyles) {
    		case "menu-click":
    			html.setAttribute("data-nav-style", "menu-click");
    			localStorage.removeItem("Syntoverticalstyles");
    			if (
    			!document.querySelector(".authentication-page") &&
    			!document.querySelector(".cover1")
    			) {
    			menuClickFn();
    			}
    			html.removeAttribute("data-vertical-style");
    			break;
    		case "menu-hover":
    			html.setAttribute("data-nav-style", "menu-hover");
    			localStorage.removeItem("Syntoverticalstyles");
    			if (
    			!document.querySelector(".authentication-page") &&
    			!document.querySelector(".cover1")
    			) {
    			menuhoverFn();
    			}
    			html.removeAttribute("data-vertical-style");
    			break;
    		case "icon-click":
    			html.setAttribute("data-nav-style", "icon-click");
    			localStorage.removeItem("Syntoverticalstyles");
    			if (
    			!document.querySelector(".authentication-page") &&
    			!document.querySelector(".cover1")
    			) {
    			iconClickFn();
    			}
    			html.removeAttribute("data-vertical-style");
    			break;
    		case "icon-hover":
    			html.setAttribute("data-nav-style", "icon-hover");
    			localStorage.removeItem("Syntoverticalstyles");
    			if (
    			!document.querySelector(".authentication-page") &&
    			!document.querySelector(".cover1")
    			) {
    			iconHoverFn();
    			}
    			html.removeAttribute("data-vertical-style");
    			break;
    		}
    	}
    	if (localStorage.Syntoclassic) {
    		let html = document.querySelector("html");
    		html.setAttribute("data-page-style", "classic");
    	}
    	if (localStorage.Syntoboxed) {
    		let html = document.querySelector("html");
    		html.setAttribute("data-width", "boxed");
    	}
    	if (localStorage.Syntoheaderfixed) {
    		let html = document.querySelector("html");
    		html.setAttribute("data-header-position", "fixed");
    	}
    	if (localStorage.Syntoheaderscrollable) {
    		let html = document.querySelector("html");
    		html.setAttribute("data-header-position", "scrollable");
    	}
    	if (localStorage.Syntomenufixed) {
    		let html = document.querySelector("html");
    		html.setAttribute("data-menu-position", "fixed");
    	}
    	if (localStorage.Syntomenuscrollable) {
    		let html = document.querySelector("html");
    		html.setAttribute("data-menu-position", "scrollable");
    	}
    	if (localStorage.SyntoMenu) {
    		let html = document.querySelector("html");
    		let menuValue = localStorage.getItem("SyntoMenu");
    		switch (menuValue) {
    		case "light":
    			html.setAttribute("data-menu-styles", "light");
    			break;
    		case "dark":
    			html.setAttribute("data-menu-styles", "dark");
    			break;
    		case "color":
    			html.setAttribute("data-menu-styles", "color");
    			break;
    		case "gradient":
    			html.setAttribute("data-menu-styles", "gradient");
    			break;
    		case "transparent":
    			html.setAttribute("data-menu-styles", "transparent");
    			break;
    		default:
    			break;
    		}
    	}
    	if (localStorage.SyntoHeader) {
    		let html = document.querySelector("html");
    		let headerValue = localStorage.getItem("SyntoHeader");
    		switch (headerValue) {
    		case "light":
    			html.setAttribute("data-header-styles", "light");
    			break;
    		case "dark":
    			html.setAttribute("data-header-styles", "dark");
    			break;
    		case "color":
    			html.setAttribute("data-header-styles", "color");
    			break;
    		case "gradient":
    			html.setAttribute("data-header-styles", "gradient");
    			break;
    		case "transparent":
    			html.setAttribute("data-header-styles", "transparent");
    			break;

    		default:
    			break;
    		}
    	}
    	if (localStorage.bgimg ) {
    		let html = document.querySelector("html");
    		let value = localStorage.getItem("bgimg");
    		html.setAttribute("bg-img", value);
    	if (document.querySelector("#hs-overlay-switcher") ){
    		switch (value) {
    		case "bgimg1":
    			document.querySelector("#switcher-bg-img").checked = true;
    			break;
    		case "bgimg2":
    			document.querySelector("#switcher-bg-img1").checked = true;
    			break;
    		case "bgimg3":
    			document.querySelector("#switcher-bg-img2").checked = true;
    			break;
    		case "bgimg4":
    			document.querySelector("#switcher-bg-img3").checked = true;
    			break;
    		case "bgimg5":
    			document.querySelector("#switcher-bg-img4").checked = true;
    			break;
    		default:
    			break;
    		}
    		}
    	}
    	}

###### Step2:

To remove complete LocalStorage saving you need to remove all localstorage related calling functions in custom-switcher.js `assets/js/custom-switcher.js`file.

LocalStorage related functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear. Below are the some examples to find out.

    localStorage.setItem( );
    localStorage.removeItem( );
    localStorage.getItem( )
    localStorage.clear();
    localStorageBackup();

###### Step3:

To remove complete LocalStorage saving you also need to remove main.js link present in mainhead.html `Path:html/partials/mainhead.html` as shown below

    <script src="../assets/js/main.js"></script>

##### Disabling Switcher

#### How To Disable Switcher In All Pages ?

###### Step1:

Open header.html file `html/partials/header.html`

To remove switcher icons remove below code shown in `header.html` file

    <div class="switcher-icon">
    <button aria-label="button" type="button" class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center
    items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-gray-100 hover:bg-gray-200 text-gray-500
    align-middle focus:outline-none focus-visible:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-offset-0
    focus:ring-offset-white transition-all text-xs dark:bg-bgdark dark:hover:bg-black/20 dark:text-white/70
    dark:hover:text-white dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
    data-hs-overlay="#hs-overlay-switcher">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 animate-spin fill-headerprime" height="24px" viewBox="0 0 24
    24" width="24px" fill="#000000">
    <path d="M0 0h24v24H0V0z" fill="none"></path>
    <path d="M19.28 8.6l-.7-1.21-1.27.51-1.06.43-.91-.7c-.39-.3-.8-.54-1.23-.71l-1.06-.43-.16-1.13L12.7 4h-1.4l-.19
    1.35-.16 1.13-1.06.44c-.41.17-.82.41-1.25.73l-.9.68-1.05-.42-1.27-.52-.7 1.21 1.08.84.89.7-.14
    1.13c-.03.3-.05.53-.05.73s.02.43.05.73l.14 1.13-.89.7-1.08.84.7 1.21 1.27-.51 1.06-.43.91.7c.39.3.8.54
    1.23.71l1.06.43.16 1.13.19 1.36h1.39l.19-1.35.16-1.13 1.06-.43c.41-.17.82-.41 1.25-.73l.9-.68 1.04.42
    1.27.51.7-1.21-1.08-.84-.89-.7.14-1.13c.04-.31.05-.52.05-.73 0-.21-.02-.43-.05-.73l-.14-1.13.89-.7 1.1-.84zM12 16c-2.21
    0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z" opacity=".3"></path>
    <path d="M19.43 12.98c.04-.32.07-.64.07-.98
    0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49
    1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38
    2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11
    1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0
    .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59
    1.69-.98l2.49 1c.06.02.12.03.18.03.17 0
    .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14
    1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2
    1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21
    1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51
    1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7
    1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1
    0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"></path>
    </svg>
    </button>
    </div>

###### Step2:

After removing code in `header.html` page remove switcher.html partial link in src folder as shown below in every html page

    @SPK@include("partials/switcher.html")

###### Step3:

After removing switcher partial in every page also remove `custom_switcherjs.html` partial in src folder in every html page

    @SPK@include("partials/custom_switcherjs.html")

###### Step4:

Remove main.js link present in mainhead.html `Path:html/partials/mainhead.html` as show below

    <script src="../assets/js/main.js"></script>

###### Step5:

Finally remove below shown code in custom.js file `Path:assets/js/custom.js`

    if(document.querySelector("#hs-overlay-switcher")){

    	/*Start Switcher Scroll */
    	var myElement1 = document.getElementById("switcher-body");
    	new SimpleBar(myElement1, { autoHide: true });
    	/*End Switcher Scroll */

    	//switcher color pickers
    	const pickrContainerPrimary = document.querySelector(
    	".pickr-container-primary"
    	);
    	const themeContainerPrimary = document.querySelector(
    	".theme-container-primary"
    	);
    	const pickrContainerBackground = document.querySelector(
    	".pickr-container-background"
    	);
    	const themeContainerBackground = document.querySelector(
    	".theme-container-background"
    	);

    	/* for theme primary */
    	const nanoThemes = [
    	[
    		"nano",
    		{
    		defaultRepresentation: "RGB",
    		components: {
    			preview: true,
    			opacity: false,
    			hue: true,

    			interaction: {
    			hex: false,
    			rgba: true,
    			hsva: false,
    			input: true,
    			clear: false,
    			save: false,
    			},
    		},
    		},
    	],
    	];
    	const nanoButtons = [];
    	let nanoPickr = null;
    	for (const [theme, config] of nanoThemes) {
    	const button = document.createElement("button");
    	button.innerHTML = theme;
    	nanoButtons.push(button);

    	button.addEventListener("click", () => {
    		const el = document.createElement("p");
    		pickrContainerPrimary.appendChild(el);

    		/* Delete previous instance */
    		if (nanoPickr) {
    		nanoPickr.destroyAndRemove();
    		}

    		/* Apply active class */
    		for (const btn of nanoButtons) {
    		btn.classList[btn === button ? "add" : "remove"]("active");
    		}

    		/* Create fresh instance */
    		nanoPickr = new Pickr(
    		Object.assign(
    			{
    			el,
    			theme,
    			default: "#5e76a6",
    			},
    			config
    		)
    		);

    		/* Set events */
    		nanoPickr.on("changestop", (source, instance) => {
    		let color = instance.getColor().toRGBA();
    		let html = document.querySelector("html");
    		html.style.setProperty(
    			"--color-primary",
    			`${Math.floor(color[0])} ${Math.floor(color[1])} ${Math.floor(
    			color[2]
    			)}`
    		);
    		html.style.setProperty(
    			"--color-primary-rgb",
    			`${Math.floor(color[0])} ,${Math.floor(color[1])}, ${Math.floor(
    			color[2]
    			)}`
    		);
    		/* theme color picker */
    		localStorage.setItem(
    			"primaryRGB",
    			`${Math.floor(color[0])}, ${Math.floor(color[1])}, ${Math.floor(
    			color[2]
    			)}`
    		);
    		localStorage.setItem(
    			"primaryRGB1",
    			`${Math.floor(color[0])} ${Math.floor(color[1])} ${Math.floor(
    			color[2]
    			)}`
    		);
    		updateColors();
    		});
    	});

    	themeContainerPrimary.appendChild(button);
    	}
    	nanoButtons[0].click();
    	/* for theme primary */

    	/* for theme background */
    	const nanoThemes1 = [
    	[
    		"nano",
    		{
    		defaultRepresentation: "RGB",
    		components: {
    			preview: true,
    			opacity: false,
    			hue: true,

    			interaction: {
    			hex: false,
    			rgba: true,
    			hsva: false,
    			input: true,
    			clear: false,
    			save: false,
    			},
    		},
    		},
    	],
    	];
    	const nanoButtons1 = [];
    	let nanoPickr1 = null;
    	for (const [theme, config] of nanoThemes) {
    	const button = document.createElement("button");
    	button.innerHTML = theme;
    	nanoButtons1.push(button);

    	button.addEventListener("click", () => {
    		const el = document.createElement("p");
    		pickrContainerBackground.appendChild(el);

    		/* Delete previous instance */
    		if (nanoPickr1) {
    		nanoPickr1.destroyAndRemove();
    		}

    		/* Apply active class */
    		for (const btn of nanoButtons) {
    		btn.classList[btn === button ? "add" : "remove"]("active");
    		}

    		/* Create fresh instance */
    		nanoPickr1 = new Pickr(
    		Object.assign(
    			{
    			el,
    			theme,
    			default: "#5e76a6",
    			},
    			config
    		)
    		);

    		/* Set events */
    		nanoPickr1.on("changestop", (source, instance) => {
    		let color = instance.getColor().toRGBA();
    		let html = document.querySelector("html");
    		html.style.setProperty(
    			"--body-bg",
    			`${Math.floor(color[0] + 14)}
    			${Math.floor(color[1] + 14)}
    			${Math.floor(color[2] + 14)}`
    		);
    		html.style.setProperty(
    			"--dark-bg",
    			`
    			${Math.floor(color[0])}
    			${Math.floor(color[1])}
    			${Math.floor(color[2])}

    			`
    		);
    		localStorage.removeItem("bgtheme");
    		updateColors();
    		html.classList.add("dark");
    		html.classList.remove("light");
    		html.setAttribute("data-menu-styles", "dark");
    		html.setAttribute("data-header-styles", "dark");
    		document.querySelector("#switcher-dark-theme").checked = true;
    		localStorage.setItem(
    			"bodyBgRGB",
    			`${Math.floor(color[0] + 14)}
    			${Math.floor(color[1] + 14)}
    			${Math.floor(color[2] + 14)}`
    		);
    		localStorage.setItem(
    			"darkBgRGB",
    			`${Math.floor(color[0])} ${Math.floor(color[1])} ${Math.floor(
    			color[2]
    			)}`
    		);
    		});
    	});
    	themeContainerBackground.appendChild(button);
    	}
    	nanoButtons1[0].click();
    	/* for theme background */
    }

Note : After completing above steps please run gulp command to update dist folder.

#### How To Remove Switcher In Landing Page ?

###### Step1:

Remove below shown code in`app-sidebar` of landing.html file `Path:src/html/landing.html`

    <button class="btn btn-wave btn-icon btn-success" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas">
    	<i class="ri-settings-3-line"></i>
    </button>

###### Step2:

Remove below shown code in `app-header` section of landing.html file `Path:src/html/landing.html`

    <button class="btn btn-icon btn-success" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas">
    	<i class="ri-settings-3-line"></i>
    </button>