Spaner - Simple light Bootstrap Nice Admin Panel Dashboard Design Responsive HTML5 Template

1) How to Change Font Style ?

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 _fonts.scss

Example:

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");

Step 3:

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

Example:



											body {
												font-family: "Poppins", sans-serif;
												direction: ltr;
												-webkit-font-smoothing: antialiased;
												-moz-osx-font-smoothing: grayscale;
												-webkit-tap-highlight-color: transparent;
												-webkit-text-size-adjust: none;
												-ms-touch-action: manipulation;
												touch-action: manipulation;
												-webkit-font-feature-settings: "liga" 0;
												font-feature-settings: "liga" 0;
												height: 100%;
												overflow-y: scroll;
												position: relative;
										}

2) How to Change Logo ?

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.

3) How to Enable Darktheme?

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable dark-theme style as shown in below


			//Dark Theme Style
			if (!localStorage.getItem("spanerdarktheme")) {
				// html.setAttribute("data-theme-color" , "dark") // for dark theme
			}

Remove the comments to enable dark-theme as shown below


			//Dark Theme Style
			if (!localStorage.getItem("spanerdarktheme")) {
			 html.setAttribute("data-theme-color" , "dark") // for dark theme
			}

4) How to Enable Color-header?

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable color-header style as shown in below


			//Header Styles
			if (!localStorage.getItem("spanerHeader")) {
				// html.setAttribute("data-header-style" , "light") // for light header style
				// html.setAttribute("data-header-style" , "dark") // for dark header style
				// html.setAttribute("data-header-style" , "color") // for color header style
				// html.setAttribute("data-header-style" , "gradient") // for gradient header style
			}

Remove the comments to enable color-header as shown below


			//Header Styles
			if (!localStorage.getItem("spanerHeader")) {
				// html.setAttribute("data-header-style" , "light") // for light header style
				// html.setAttribute("data-header-style" , "dark") // for dark header style
					html.setAttribute("data-header-style" , "color") // for color header style
				// html.setAttribute("data-header-style" , "gradient") // for gradient header style
			}

5) How to Enable Dark-header?

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable dark-header style as shown in below


			//Header Styles
			if (!localStorage.getItem("spanerHeader")) {
				// html.setAttribute("data-header-style" , "light") // for light header style
				// html.setAttribute("data-header-style" , "dark") // for dark header style
				// html.setAttribute("data-header-style" , "color") // for color header style
				// html.setAttribute("data-header-style" , "gradient") // for gradient header style
			}

Remove the comments to enable dark-header as shown below


			//Header Styles
			if (!localStorage.getItem("spanerHeader")) {
				// html.setAttribute("data-header-style" , "light") // for light header style
					html.setAttribute("data-header-style" , "dark") // for dark header style
				// html.setAttribute("data-header-style" , "color") // for color header style
				// html.setAttribute("data-header-style" , "gradient") // for gradient header style
			}

6) How to Enable Light-header?

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable light-header style as shown in below


		//Header Styles
		if (!localStorage.getItem("spanerHeader")) {
			// html.setAttribute("data-header-style" , "light") // for light header style
			// html.setAttribute("data-header-style" , "dark") // for dark header style
			// html.setAttribute("data-header-style" , "color") // for color header style
			// html.setAttribute("data-header-style" , "gradient") // for gradient header style
		}

Remove the comments to enable light-header as shown below


		//Header Styles
		if (!localStorage.getItem("spanerHeader")) {
				html.setAttribute("data-header-style" , "light") // for light header style
			// html.setAttribute("data-header-style" , "dark") // for dark header style
			// html.setAttribute("data-header-style" , "color") // for color header style
			// html.setAttribute("data-header-style" , "gradient") // for gradient header style
		}

7) How to Enable Gradient-header?

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable gradient-header style as shown in below


		//Header Styles
		if (!localStorage.getItem("spanerHeader")) {
			// html.setAttribute("data-header-style" , "light") // for light header style
			// html.setAttribute("data-header-style" , "dark") // for dark header style
			// html.setAttribute("data-header-style" , "color") // for color header style
			// html.setAttribute("data-header-style" , "gradient") // for gradient header style
		}

Remove the comments to enable gradient-header as shown below


		//Header Styles
		if (!localStorage.getItem("spanerHeader")) {
			// html.setAttribute("data-header-style" , "light") // for light header style
			// html.setAttribute("data-header-style" , "dark") // for dark header style
			// html.setAttribute("data-header-style" , "color") // for color header style
				html.setAttribute("data-header-style" , "gradient") // for gradient header style
		}

8) How to Enable Light Menu?

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable light-menu style as shown in below


		//Menu Styles
		if (!localStorage.getItem("spanerMenu")) {
			// html.setAttribute("data-menu-style" , "light") // for light menu style
			// html.setAttribute("data-menu-style", "dark") // for dark menu style
			// html.setAttribute("data-menu-style" , "color") // for color menu style
			// html.setAttribute("data-menu-style" , "gradient") // for gradient menu style
		}

Remove the comments to enable light-menu as shown below


		//Menu Styles
		if (!localStorage.getItem("spanerMenu")) {
				html.setAttribute("data-menu-style" , "light") // for light menu style
			// html.setAttribute("data-menu-style", "dark") // for dark menu style
			// html.setAttribute("data-menu-style" , "color") // for color menu style
			// html.setAttribute("data-menu-style" , "gradient") // for gradient menu style
		}

9) How to Enable Color Menu?

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable color-menu style as shown in below


		//Menu Styles
		if (!localStorage.getItem("spanerMenu")) {
			// html.setAttribute("data-menu-style" , "light") // for light menu style
			// html.setAttribute("data-menu-style", "dark") // for dark menu style
			// html.setAttribute("data-menu-style" , "color") // for color menu style
			// html.setAttribute("data-menu-style" , "gradient") // for gradient menu style
		}

Remove the comments to enable color-menu as shown below


		//Menu Styles
		if (!localStorage.getItem("spanerMenu")) {
			// html.setAttribute("data-menu-style" , "light") // for light menu style
			// html.setAttribute("data-menu-style", "dark") // for dark menu style
				html.setAttribute("data-menu-style" , "color") // for color menu style
			// html.setAttribute("data-menu-style" , "gradient") // for gradient menu style
		}

10) How to Enable Dark Menu?

open custom-switcher.js path:(assets/js/custom-switcher.js)file and remove comments to enable dark-menu style as shown in below


											//Menu Styles
											if (!localStorage.getItem("spanerMenu")) {
												// html.setAttribute("data-menu-style" , "light") // for light menu style
												// html.setAttribute("data-menu-style", "dark") // for dark menu style
												// html.setAttribute("data-menu-style" , "color") // for color menu style
												// html.setAttribute("data-menu-style" , "gradient") // for gradient menu style
											}

Remove the comments to enable dark-menu as shown below


											//Menu Styles
											if (!localStorage.getItem("spanerMenu")) {
												// html.setAttribute("data-menu-style" , "light") // for light menu style
													html.setAttribute("data-menu-style", "dark") // for dark menu style
												// html.setAttribute("data-menu-style" , "color") // for color menu style
												// html.setAttribute("data-menu-style" , "gradient") // for gradient menu style
											}

11) How to Enable Gradient Menu?

open custom-switcher.js path:(assets/js/custom-switcher.js)file and remove comments to enable gradient-menu style as shown in below


											//Menu Styles
											if (!localStorage.getItem("spanerMenu")) {
												// html.setAttribute("data-menu-style" , "light") // for light menu style
												// html.setAttribute("data-menu-style", "dark") // for dark menu style
												// html.setAttribute("data-menu-style" , "color") // for color menu style
												// html.setAttribute("data-menu-style" , "gradient") // for gradient menu style
											}

Remove the comments to enable gradient-menu as shown below


											//Menu Styles
											if (!localStorage.getItem("spanerMenu")) {
												// html.setAttribute("data-menu-style" , "light") // for light menu style
												// html.setAttribute("data-menu-style", "dark") // for dark menu style
												// html.setAttribute("data-menu-style" , "color") // for color menu style
													html.setAttribute("data-menu-style" , "gradient") // for gradient menu style
											}

12) How to Enable Boxed-Layout?

open custom-switcher.js path:(assets/js/custom-switcher.js)file and remove comments to enable layout-boxed style as shown in below


											//Boxed styles
											if (!localStorage.getItem("spanerboxed")) {
												// html.setAttribute("data-width" , "boxed") // for boxed style
											}

Remove the comments to enable layout-boxed as shown below



											//Boxed styles
											if (!localStorage.getItem("spanerboxed")) {
												html.setAttribute("data-width" , "boxed") // for boxed style
											}

13) How to Enable Scrollable-Layout?

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable scrollable-layout style as shown in below


//Scrollabel styles
if (!localStorage.getItem("spanerscrollable")) {
	// html.setAttribute("data-position" , "scrollable") // for scrollable style
}

Remove the comments to enable scrollable-layout as shown below


//Scrollabel styles
if (!localStorage.getItem("spanerscrollable")) {
	html.setAttribute("data-position" , "scrollable") // for scrollable style
}

14) How to Enable Sidemenu-Icon-with Text?

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable sidemenu-icontext style as shown in below


//IconText Layout Styles
if (!localStorage.getItem("spanerverticalstyles")) {
	// html.setAttribute("data-vertical-style" , "icontext") // for Vertical icontext style
	// textLayoutFn();
}

Remove the comments to enable sidemenu-icontext as shown below


//IconText Layout Styles
if (!localStorage.getItem("spanerverticalstyles")) {
	 html.setAttribute("data-vertical-style" , "icontext") // for Vertical icontext style
	 textLayoutFn();
}

15) How to Enable Closed-Menu?

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable closed menu style as shown in below


		//Closed Layout Styles
		if (!localStorage.getItem("spanerverticalstyles")) {
			// html.setAttribute("data-vertical-style" , "closed") // for Vertical closed style
			// $('body').addClass('sidenav-toggled');
		}

Remove the comments to enable Closed Sidemenu as shown below


		//Closed Layout Styles
		if (!localStorage.getItem("spanerverticalstyles")) {
			html.setAttribute("data-vertical-style" , "closed") // for Vertical closed style
			$('body').addClass('sidenav-toggled');
		}

16) How to Enable Icon Overlay

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable Icon Overlay style as shown in below



		//Overlay Layout Styles
		if (!localStorage.getItem("spanerverticalstyles")) {
			// html.setAttribute("data-vertical-style" , "overlay") // for Vertical overlay style
			// $('body').addClass('sidenav-toggled');
		}

Remove the comments to enable sideicon-menu as shown below



		//Overlay Layout Styles
		if (!localStorage.getItem("spanerverticalstyles")) {
			html.setAttribute("data-vertical-style" , "overlay") // for Vertical overlay style
			$('body').addClass('sidenav-toggled');
		}

17) How to Enable Hover Submenu

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable Hover submenu style as shown in below



		//Hover Submenu Layout Styles
		if (!localStorage.getItem("spanerverticalstyles")) {
			// html.setAttribute("data-vertical-style" , "hover") // for Vertical hover style
			// hoverLayoutFn();
		}

Remove the comments to enable Hover Submenu as shown below



		//Hover Submenu Layout Styles
		if (!localStorage.getItem("spanerverticalstyles")) {
			html.setAttribute("data-vertical-style" , "hover") // for Vertical hover style
			hoverLayoutFn();
		}

18) How to Enable Hover Submenu Style1

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable Hover submenu style1 style as shown in below



		//Hover Submenu1 Layout Styles
		if (!localStorage.getItem("spanerverticalstyles")) {
			// html.setAttribute("data-vertical-style" , "hover1") // for Vertical hover1 style
			// hoverLayoutFn();
		}

Remove the comments to enable Hover Submenu Style1 as shown below



		//Hover Submenu1 Layout Styles
		if (!localStorage.getItem("spanerverticalstyles")) {
			// html.setAttribute("data-vertical-style" , "hover1") // for Vertical hover1 style
			// hoverLayoutFn();
		}

19) How to Enable Double-menu

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable Double-menu style as shown in below



		//Double Menu Layout Styles
		if (!localStorage.getItem("spanerverticalstyles")) {
			// html.setAttribute("data-vertical-style" , "doublemenu") // for Vertical doublemenu style
			// doubleLayoutFn();
		}

Remove the comments to enable Double-menu as shown below



		//Double Menu Layout Styles
		if (!localStorage.getItem("spanerverticalstyles")) {
			html.setAttribute("data-vertical-style" , "doublemenu") // for Vertical doublemenu style
			doubleLayoutFn();
		}

20) How to Enable Double-menu-tabs

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable Double-menu-tabs style as shown in below



		//Double Menu Tabs Layout Styles
		if (!localStorage.getItem("spanerverticalstyles")) {
			// html.setAttribute("data-vertical-style" , "doublemenu-tabs") // for Vertical doublemenu-tabs style
			// doubleLayoutFn();
		}

Remove the comments to enable Double-menu-tabs as shown below



		//Double Menu Tabs Layout Styles
		if (!localStorage.getItem("spanerverticalstyles")) {
			html.setAttribute("data-vertical-style" , "doublemenu-tabs") // for Vertical doublemenu-tabs style
			doubleLayoutFn();
		}

21) How to Enable RTL version?

open custom-switcher.js path:(assets/js/custom-switcher.js)file . and remove comments to enable RTL version as shown in below


		//RTL
		if (!localStorage.getItem("spanerrtl")) {
			// html.setAttribute("dir" , "rtl") // for rtl version
		}

Remove the comments to enable Rtl Version as shown below


		//RTL
		if (!localStorage.getItem("spanerrtl")) {
			 html.setAttribute("dir" , "rtl") // for rtl version
		}

22) How to Enable Horizontalmenu?

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable Horizontalmenu as shown in below


		//Menu Layout
		if (!localStorage.getItem("spanerlayout")) {
			// html.setAttribute("data-layout" , "vertical") // for Vertical layout
			// html.setAttribute("data-layout" , "horizontal") // for horizontal layout
		}

		//horizontalmenu Layout Styles
		if (!localStorage.getItem("spanerlayout") === "horizontal" || localStorage.getItem("spanerlayout") == null) {
			// html.setAttribute("data-hor-style" , "hor-click") // for horizontal click style
			// html.setAttribute("data-hor-style" , "hor-hover") // for horizontal hover style
		}

Remove the comments to enable horizontal as shown below


		//Menu Layout
		if (!localStorage.getItem("spanerlayout")) {
			// html.setAttribute("data-layout" , "vertical") // for Vertical layout
			html.setAttribute("data-layout" , "horizontal") // for horizontal layout
		}

		//horizontalmenu Layout Styles
		if (!localStorage.getItem("spanerlayout") === "horizontal" || localStorage.getItem("spanerlayout") == null) {
			html.setAttribute("data-hor-style" , "hor-click") // for horizontal click style
			// html.setAttribute("data-hor-style" , "hor-hover") // for horizontal hover style
		}

23) How to Enable Horizontal Hover layout

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable Horizontal Hover layout style as shown in below


		//Menu Layout
		if (!localStorage.getItem("spanerlayout")) {
			// html.setAttribute("data-layout" , "vertical") // for Vertical layout
			// html.setAttribute("data-layout" , "horizontal") // for horizontal layout
		}

		//horizontalmenu Layout Styles
		if (!localStorage.getItem("spanerlayout") === "horizontal" || localStorage.getItem("spanerlayout") == null) {
			// html.setAttribute("data-hor-style" , "hor-click") // for horizontal click style
			// html.setAttribute("data-hor-style" , "hor-hover") // for horizontal hover style
		}

Remove the comments to enable Horizontal Hover layout as shown below


		//Menu Layout
		if (!localStorage.getItem("spanerlayout")) {
			// html.setAttribute("data-layout" , "vertical") // for Vertical layout
				html.setAttribute("data-layout" , "horizontal") // for horizontal layout
		}

		//horizontalmenu Layout Styles
		if (!localStorage.getItem("spanerlayout") === "horizontal" || localStorage.getItem("spanerlayout") == null) {
			// html.setAttribute("data-hor-style" , "hor-click") // for horizontal click style
				html.setAttribute("data-hor-style" , "hor-hover") // for horizontal hover style
		}

24) How to Enable Horizontal Centerlogo

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments to enable centerlogo-horizontal style as shown in below


		//Centerlogo For Horizontal
		if (!localStorage.getItem("spanercenterlogo")) {
			// html.setAttribute("data-logo" , "centerlogo") // for Horizontal Centerlogo
		}

Remove the comments to enable centerlogo-horizontal as shown below


		//Centerlogo For Horizontal
		if (!localStorage.getItem("spanercenterlogo")) {
			html.setAttribute("data-logo" , "centerlogo") // for Horizontal Centerlogo
		}

26) How to Enable Rtl and Dark-mode in landing-page

To enable RTL in landing-page:

open landing.js path:(assets/js/landing.js) file and remove comments for rtl to enable rtl style as shown in below


			//RTL
			if (!localStorage.getItem("spanerrtl")) {
				// html.setAttribute("dir" , "rtl") // for rtl version
			}

Remove the comments to enable rtl as shown below


			//RTL
			if (!localStorage.getItem("spanerrtl")) {
				html.setAttribute("dir" , "rtl") // for rtl version
			}

To enable Dark-mode in landing-page:

open landing.js path:(assets/js/landing.js) file and remove comments for dark-theme to enable dark-mode style as shown in below


			//Dark Theme Style
			if (!localStorage.getItem("spanerdarktheme")) {
				// html.setAttribute("data-theme-color" , "dark") // for dark theme
			}

Remove the comments to enable dark-theme as shown below


			//Dark Theme Style
			if (!localStorage.getItem("spanerdarktheme")) {
				html.setAttribute("data-theme-color" , "dark") // for dark theme
			}

27) 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() {
		// if there is a value stored, update color picker and background color
		// Used to retrive the data from local storage
		if (localStorage.getItem("spanerprimaryColor")) {
			if (document.getElementById('colorID')) {
				document.getElementById('colorID').value = localStorage.getItem("spanerprimaryColor");
			}
			document.querySelector('html').style.setProperty('--primary-rgb', localStorage.getItem("spanerprimaryColor"));
			document.querySelector('html').style.setProperty('--primary-rgb1', localStorage.getItem("spanerprimaryColor1"));
		}
		if (localStorage.getItem("spanerbgColor")) {
			if (document.getElementById('transparentBgColorID')) {
				document.getElementById('transparentBgColorID').value = localStorage.getItem("spanerbgColor");
			}
			document.querySelector('html').style.setProperty('--background', localStorage.getItem("spanerbgColor"));
			document.querySelector('html').style.setProperty('--white', localStorage.getItem("spanerbgwhite"));
			document.querySelector('html').style.setProperty('--menu-bg', localStorage.getItem("spanermenubg"));
			document.querySelector('html').style.setProperty('--header-bg', localStorage.getItem("spanerheaderbg"));
			let html = document.querySelector('html');
			html.setAttribute('data-theme-color', 'dark');
			if (!document.body.classList.contains('auth-page') && !document.querySelector(".error-page1")) {
				let mainHeader = document.querySelector('.app-header');
				mainHeader.style.setProperty('--header-bg', localStorage.getItem("spanerheaderbg"))
				let appSidebar = document.querySelector('.app-sidebar');
				appSidebar.style.setProperty('--white', localStorage.getItem("spanerbgwhite"));
				appSidebar.style.setProperty('--menu-bg', localStorage.getItem("spanermenubg"));
			}
			$('#switchbtn-dark').prop('checked', true);
			$('#switchbtn-darkmenu').prop('checked', true);
			$('#switchbtn-darkheader').prop('checked', true);

			localStorage.removeItem("spanerHeader", 'dark');
			localStorage.removeItem("spanerMenu", 'dark');
			localStorage.removeItem("spanerHeader", 'light');
			localStorage.removeItem("spanerMenu", 'light');
		}
		if (localStorage.spanerdarktheme) {
			let html = document.querySelector('html');
			html.setAttribute('data-theme-color', 'dark');
		}
		if (localStorage.spanerrtl) {
			let html = document.querySelector('html');
			html.setAttribute('dir', 'rtl');
		}
		if (localStorage.spanerlayout) {
			let html = document.querySelector('html');
			let layoutValue = localStorage.getItem('spanerlayout');
			html.setAttribute('data-layout', 'horizontal');
			switch (layoutValue) {
				case 'horizontal':
					html.setAttribute('data-hor-style', 'hor-click');
					break;
				case 'horizontalhover':
					html.setAttribute('data-hor-style', 'hor-hover');
					break;
			}
		}
		if (localStorage.spanerverticalstyles) {
			let html = document.querySelector('html');
			let verticalStyles = localStorage.getItem('spanerverticalstyles');
			if (!document.body.classList.contains('auth-page') && !document.querySelector(".error-page1")) {
				switch (verticalStyles) {
					case 'closed':
						hoverLayoutFn();
						html.setAttribute('data-vertical-style', 'closed');
						break;
					case 'icontext':
						textLayoutFn();
						html.setAttribute('data-vertical-style', 'icontext');
						break;
					case 'overlay':
						hoverLayoutFn();
						html.setAttribute('data-vertical-style', 'overlay');
						break;
					case 'hover':
						hoverLayoutFn();
						html.setAttribute('data-vertical-style', 'hover');
						break;
					case 'hover1':
						html.setAttribute('data-vertical-style', 'hover1');
						hoverLayoutFn();
						break;
					case 'doublemenu':
						html.setAttribute('data-vertical-style', 'doublemenu');
						doubleLayoutFn();
						break;
					case 'doublemenu-tabs':
						html.setAttribute('data-vertical-style', 'doublemenu-tabs');
						doubleLayoutFn();
						break;

				}
			}
		}
		if (localStorage.spanernoshadow) {
			let html = document.querySelector('html');
			html.setAttribute('data-skins', 'no-shadow');
		}
		if (localStorage.spanerboxed) {
			let html = document.querySelector('html');
			html.setAttribute('data-width', 'boxed');
		}
		if (localStorage.spanerscrollable) {
			let html = document.querySelector('html');
			html.setAttribute('data-position', 'scrollable');
		}
		if (localStorage.spanercenterlogo) {
			let html = document.querySelector('html');
			html.setAttribute('data-logo', 'centerlogo');
		}
		if (localStorage.spanerMenu) {
			let html = document.querySelector('html');
			let menuValue = localStorage.getItem('spanerMenu');
			switch (menuValue) {
				case 'light':
					html.setAttribute('data-menu-style', 'light');
					break;
				case 'dark':
					html.setAttribute('data-menu-style', 'dark');
					break;
				case 'color':
					html.setAttribute('data-menu-style', 'color');
					break;
				case 'gradient':
					html.setAttribute('data-menu-style', 'gradient');
					break;

				default:
					break;
			}
		}
		if (localStorage.spanerHeader) {
			let html = document.querySelector('html');
			let headerValue = localStorage.getItem('spanerHeader');
			switch (headerValue) {
				case 'light':
					html.setAttribute('data-header-style', 'light');
					break;
				case 'dark':
					html.setAttribute('data-header-style', 'dark');
					break;
				case 'color':
					html.setAttribute('data-header-style', 'color');
					break;
				case 'gradient':
					html.setAttribute('data-header-style', 'gradient');
					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 and custom.js assets/js/custom.js files.

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


					localStorage.setItem("spanerlighttheme", true);
					localStorage.removeItem("spanerdarktheme");
					localStorage.getItem("spanerprimaryColor")

To clear Local storage in landing-page:

To clear LocalStorage loading functions you need to remove landingPageLocalstorage() function in landing.jsassets/js/landing.js as shown below

function localStorageBackup() {
		// if there is a value stored, update color picker and background color
		// Used to retrive the data from local storage
		if (localStorage.spanerprimaryColor) {
			if (document.getElementById('colorID')) {
				document.getElementById('colorID').value = localStorage.spanerprimaryColor;
			}
			document.querySelector('html').style.setProperty('--primary-bg-color', localStorage.spanerprimaryColor);
			document.querySelector('html').style.setProperty('--primary-bg-hover', localStorage.spanerprimaryHoverColor);
			document.querySelector('html').style.setProperty('--primary-bg-border', localStorage.spanerprimaryBorderColor);
			document.querySelector('html').style.setProperty('--primary-transparentcolor', localStorage.spanerprimaryTransparent);
			document.querySelector('html').style.setProperty('--primary-bg-color-rgb', localStorage.spanerprimaryRGB);
		}
		if (localStorage.spanerbgColor) {
			if (document.getElementById('transparentBgColorID')) {
				document.getElementById('transparentBgColorID').value = localStorage.spanerbgColor;
			}
			document.querySelector('html').style.setProperty('--background', localStorage.spanerbgColor);
			document.querySelector('html').style.setProperty('--white', localStorage.spanerbgwhite);
			document.querySelector('html').style.setProperty('--menu-bg', localStorage.spanermenubg);
			document.querySelector('html').style.setProperty('--header-bg', localStorage.spanerheaderbg);
			let html = document.querySelector('html');
			html.setAttribute('data-theme-color', 'dark');
			$('#switchbtn-dark').prop('checked', true);
			$('#switchbtn-darkmenu').prop('checked', true);
			$('#switchbtn-darkheader').prop('checked', true);

			localStorage.removeItem("spanerHeader", 'dark');
			localStorage.removeItem("spanerHeader", 'light');
		}
		if (localStorage.spanerdarktheme) {
			let html = document.querySelector('html');
			html.setAttribute('data-theme-color', 'dark');
		}
		if (localStorage.spanerrtl) {
			let html = document.querySelector('html');
			html.setAttribute('dir', 'rtl');
		}

	}

Also You need to remove localstorage related calling functions localStorage.removeItem,localStorage.setItem in landing.js assets/js/landing.jsfile.

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 _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (assets/scss/_variables.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.

FAQS

1) How to Change Font Style ?

Step 1:

How to Select font Family

Step 2:

Step 3:

2) How to Change Logo ?

3) How to Enable Darktheme?

4) How to Enable Color-header?

5) How to Enable Dark-header?

6) How to Enable Light-header?

7) How to Enable Gradient-header?

8) How to Enable Light Menu?

9) How to Enable Color Menu?

10) How to Enable Dark Menu?

11) How to Enable Gradient Menu?

12) How to Enable Boxed-Layout?

13) How to Enable Scrollable-Layout?

14) How to Enable Sidemenu-Icon-with Text?

15) How to Enable Closed-Menu?

16) How to Enable Icon Overlay

17) How to Enable Hover Submenu

18) How to Enable Hover Submenu Style1

19) How to Enable Double-menu

20) How to Enable Double-menu-tabs

21) How to Enable RTL version?

22) How to Enable Horizontalmenu?

23) How to Enable Horizontal Hover layout

24) How to Enable Horizontal Centerlogo

26) How to Enable Rtl and Dark-mode in landing-page

To enable RTL in landing-page:

To enable Dark-mode in landing-page:

27) How to clear LocalStorage (cookie)?

Step1:

Step2:

To clear Local storage in landing-page:

Theme Style

How to Change Primary Color for Light & Dark Themes?

Please follow the below steps to Change Primary Color

Step 1 :

Step 2 :