noa – Bootstrap5 Admin & Dashboard Template

Note:-

Please refer Faq's page in documentation itself for queries like customization like color ,rtl ,dark style..etc.

How to enable switcher in any page ?

Switcher

How to change color of any chart according to the primary color of the template ?

Please Follow the below steps

Step1:

open a js file used for that particular HTML page and create a new function in that that js file as shown below

NOTE-1: For index.html page there is index.js file which is used for that particular page only. You should create function and place data for your chart in that index.js only.

IMPORTANT:If you want to place a new chart in any other page Please create new js file and create the below function


	function chartid() {  -----------
		--------
		----------
	 }

NOTE-2:Function name should be unique,It is better to give the function name according to your chart id, any other names also can be used

Step2:

Place your new chart data in the function which you created.

Step3:

open themeColors.js Path:(HTML\noa\assets\js\themeColors.js) and paste the below code in the names() function in located at the bottom of the file.


		if(document.querySelector('#Your-chart-id') !== null){
			example();
		}

		Note:Where example(); is the name of the function which you create.

replace (#Your-chart-id) with your new chart id & replace example(); with chartid() function which you created in step 1.

Step3:

place ( myVarVal ) variable before the colors of your chart where you want to change accordingly to the primary color of the template for example refer below code which we used in index.js file.


		colors: [ myVarVal],

How to Enable Styles for switcher?

Please Follow the below steps

Step1:

Go To any HTML file in Script Section Can you change our custom.js to custom1.js style link. check below Image

The following HTML,JS, CSS you must have in your page to enable switcher with switcher icon.

Below SWITCHER HTML code is also available in switcher1.html page

    

<!--  Switcher js -->
<script src="../assets/switcher/js/switcher.js"></script>

"Below links shows how the switcher page looks like & path of the Switcher page in the template."

https://ibb.co/C0cBTJs (Path:Pages/Switcher)

If You want to add switcher icon to any page just replace below code in place of app-Header section

NOTE:When page reloads, to active primary color from a color picker in switcher then follow below process:

Uncomment the below code in themecolor.js (../assets/js/themecolor.js)

// document.getElementById('colorID').value = localStorage.primaryColor;

// document.getElementById('darkPrimaryColorID').value = localStorage.darkPrimary;

// document.getElementById('transparentBgColorID').value = localStorage.darkBackgroundColor;

"Below links shows where that code present in themecolor.js."

https://ibb.co/vsnQ0tq (Path:Pages/Switcher)