[BETA] Meshcentral Bootstrap 5 User Interface (#6450)

Co-authored-by: Bruno Kambere <[email protected]>
Co-authored-by: snyk-bot <[email protected]>
Co-authored-by: Simon Smith <[email protected]>

package.json

@@ -62,4 +62,4 @@
     "url": "https://github.com/Ylianst/MeshCentral.git"
   },
   "readme": "readme.md"
-}
+}

public/scripts/themes/theme-switcher.js

@@ -0,0 +1,29 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+  const themeSwitcher = document.getElementById('theme-switcher');
+  const themeStylesheet = document.getElementById('theme-stylesheet');
+
+  // Load saved theme from local storage
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+    const safeTheme = encodeURIComponent(savedTheme);
+    themeStylesheet.href = `styles/themes/${safeTheme}/bootstrap.min.css`;
+    themeSwitcher.value = savedTheme;
+  }
+
+  // Change theme on selection
+  themeSwitcher.addEventListener('change', function () {
+    const selectedTheme = themeSwitcher.value;
+    const safeTheme = encodeURIComponent(selectedTheme);
+    themeStylesheet.href = `styles/themes/${safeTheme}/bootstrap.min.css`;
+    // Save selected theme to local storage
+    localStorage.setItem('theme', selectedTheme);
+  });
+
+  // Initialize Select2 on all select elements with the 'select2' class
+  $('.select2').select2({
+    theme: 'bootstrap-5',
+    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
+    placeholder: $( this ).data( 'placeholder' ),
+  });
+});