Further attempts to integrate

web/src/js/app.js

@@ -1,10 +0,0 @@
-import 'jquery-migrate';
-
-// Popper 1.x
-import 'popper.js';
-
-// Boostrap 4.x
-import 'bootstrap';
-
-// Application code
-import './main.js';

web/src/js/app.mjs

@@ -0,0 +1,17 @@
+// jQuery 3.x
+import {$, jQuery} from 'jquery/src/jquery';
+
+// jQuery Migrate 3.x
+import 'jquery-migrate/src/migrate';
+
+// Popper 1.x
+import 'popper.js';
+
+// Boostrap 4.x
+import 'bootstrap/js/src/index';
+
+// Old application code
+import './main';
+
+// New application code
+import './index';

web/src/js/index.mjs

@@ -0,0 +1,9 @@
+import Theme from './theme';
+
+document.addEventListener('DOMContentLoaded', () => {
+    Theme.init();
+
+    document.getElementById('theme-switch-btn').addEventListener('click', () => {
+        Theme.swap();
+    });
+});

web/src/js/main.mjs

@@ -320,35 +320,6 @@ function changePlayMode(mode) {
 }
 
 
-// ----------------------
-// --- THEME SWITCHER ---
-// ----------------------
-function themeInit() {
-    let theme = localStorage.getItem("theme");
-    if (theme !== null) {
-        setPageTheme(theme);
-    }
-}
-
-function switchTheme() {
-    let theme = localStorage.getItem("theme");
-    if (theme === "light" || theme === null) {
-        setPageTheme("dark");
-        localStorage.setItem("theme", "dark");
-    } else {
-        setPageTheme("light");
-        localStorage.setItem("theme", "light");
-    }
-}
-
-function setPageTheme(theme) {
-    return;
-    if (theme === "light")
-        document.getElementById("pagestyle").setAttribute("href", "static/css/bootstrap.min.css");
-    else if (theme === "dark")
-        document.getElementById("pagestyle").setAttribute("href", "static/css/bootstrap.darkly.min.css");
-}
-
 // ---------------------
 // ------ Browser ------
 // ---------------------
@@ -1103,8 +1074,6 @@ function secondsToStr(seconds) {
     return ("00" + mins).slice(-2) + ":" + ("00" + secs).slice(-2);
 }
 
-
-themeInit();
 updateResults();
 $(document).ready(updatePlaylist);
 

web/src/js/theme.mjs

@@ -0,0 +1,42 @@
+export default class {
+    /**
+     * Internal state for dark theme activation.
+     * @property {boolean}
+     * @private
+     */
+    static #dark = false;
+
+    /**
+     * Inialize the theme class.
+     */
+    static init() {
+        // Check LocalStorage for dark theme selection
+        if (localStorage.getItem('darkTheme') === 'true') {
+            // Update internal state
+            this.#dark = true;
+
+            // Update page theme
+            this.set(true);
+        }
+    }
+
+    /**
+     * Set page theme and update local storage variable.
+     * @param {boolean} dark Whether to activate dark theme.
+     */
+    static set(dark = false) {
+        // Swap CSS to selected theme
+        document.getElementById('pagestyle')
+                .setAttribute('href', '../static/css/' + (dark ? 'dark' : 'main') + '.css');
+
+        // Update local storage
+        localStorage.setItem('darkTheme', dark);
+    }
+
+    /**
+     * Swap page theme.
+     */
+    static swap() {
+        this.set(!this.#dark);
+    }
+}