Vuexy admin provides built-in support to sync user-preferred dark/light mode with localStorage.

Ex: If the user has selected dark mode and on refresh, he/she wants to keep that mode persistent.

To enable this you just need to uncomment the below line from app-assets/js/core/app.js ~ line no 996

         // Set layout on screen load
//? Uncomment it if you want to sync layout with local db
setLayout(currentLocalStorageLayout);
      

It will enable to store of the preferred user light/dark mode and make it persistent

Vuexy admin provides built-in support to sync user-preferred collapsed menu with localStorage.

Ex: If the user want to collapsed menu, he/she wants to keep that menu persistent.

To enable this you just need to comment/uncomment the below line from app-assets/js/core/app.js ~ line no 55

      // if ($body.hasClass('menu-collapsed')) {
// ? replace above if condition with below one for menu collapsed localstorage
if ($body.hasClass('menu-collapsed') || localStorage.getItem('menuCollapsed') === 'true') {
compactMenu = true;
}

Also, need to uncomment the below line from app-assets/js/core/app.js ~ line no 376

      // ? uncomment below code for menu collapsed localstorage
// Save menu collapsed status in localstorage
if ($body.hasClass('menu-expanded') || $body.hasClass('menu-open')) {
localStorage.setItem('menuCollapsed', false);
} else {
localStorage.setItem('menuCollapsed', true);
}

It will enable to store of the preferred collapsed/expanded menu and make it persistent

You can use custom svg icons as well as font icons with Vuexy HTML Admin Template.

To use other SVG Icons Library

Please follow below steps to add new library in your HTML:

  1. Include SVG font library in HTML file. You need to add JS and CSS file's CDN or download and add it to resources/fonts/ folder and include path in Blade files. It's safe to use resources/fonts folder to migrate easily with new updates in future
  2. Update current svg icon structure with another library's structure. Like we are using data-feather="feather feather-heart" for feather SVG, you can update this with your new svg icon format
  3. You might need to update base size if you find any changes according to your updated SVG icons
  4. You can also add custom css inside assets/scss/style.scss to update/overwrite specific style of SVG icons.

You are done!

To use Font Icons Library in place of SVG

Please follow below steps to add new font icon library in your HTML:

  1. Include CDN or download font icon library and add it to resources/fonts/ folder and include it's JS and CSS file in HTML files. It's safe to use resources/fonts/ folder to migrate easily with new updates in future
  2. Update current svg icon structure with font icons. For example we integrate font awesome. Update <i data-feather="heart"></i> feather SVG to <i class="fa fa-heart"></i> font awesome icon
  3. If you are removing feather SVG fonts then make sure you update all the feather SVG icons with your font icons
  4. You might need to update base size if you find any changes according to your updated SVG icons.

You are done!

Vuexy Admin provides resources/vendor/ folder that contains js/vendors.min.js and css/vendors.min.css files for vendors js and css.

Follow below steps to remove pace loader

  1. You'll have to find and remove the pace loader's js and CSS from the vendor file manually.
  2. Now, compile the template assets.

You are done!