Use jQuery and use data-* instead of plain attributes

resources/assets/js/app.js

@@ -68,38 +68,36 @@ $(document).on('input keypress paste keyup', 'input[data-autoalias]', function (
 $(function () {
   // theme switcher without reloading
 
-  let themeStyle = document.querySelector('#theme-style');
-  const lightURL = themeStyle.getAttribute('light-url');
-  const darkURL = themeStyle.getAttribute('dark-url');
-  const navbar = document.querySelector('.page-navbar');
-  const logo = document.querySelector('#navbar-logo');
+  let themeStyle = $('#theme-style');
+  const lightURL = themeStyle.data('light-url');
+  const darkURL = themeStyle.data('dark-url');
+  const navbar = $('.page-navbar');
+  const logo = $('#navbar-logo');
 
   window.toggleDarkMode = function () {
     let newStyle = document.createElement('link');
     newStyle.rel = 'stylesheet';
-    if (themeStyle.href === lightURL) {
+    if (themeStyle.attr('href') === lightURL) {
       newStyle.href = darkURL;
-      navbar.classList.remove('navbar-light');
-      navbar.classList.add('navbar-dark');
-      logo.src = logo.getAttribute('src-dark');
+      navbar.removeClass('navbar-light');
+      navbar.addClass('navbar-dark');
+      logo.attr('src', logo.data('src-dark'));
 
       document.cookie = "dark_mode=1";
     } else {
       newStyle.href = lightURL;
-      navbar.classList.remove('navbar-dark');
-      navbar.classList.add('navbar-light');
-      logo.src = logo.getAttribute('src-light');
+      navbar.removeClass('navbar-dark');
+      navbar.addClass('navbar-light');
+      logo.attr('src', logo.data('src-light'));
 
       document.cookie = "dark_mode=0;expires=" + new Date().toUTCString();
     }
 
     // remove old css after new css has loaded to prevent FOUC
     let oldThemeStyle = themeStyle;
-    themeStyle = newStyle;
-    newStyle.addEventListener('load', () => {
-      document.head.removeChild(oldThemeStyle);
-    });
-    document.head.appendChild(newStyle);
+    themeStyle = $(newStyle);
+    themeStyle.on('load', () => oldThemeStyle.remove());
+    $(document.head).append(themeStyle);
   };
 });