Implemented a new darkmode selector using bootstrap 5.3 color mode

assets/controllers/common/darkmode_controller.js

@@ -18,43 +18,118 @@
  */
 
 import {Controller} from "@hotwired/stimulus";
-import Darkmode from "darkmode-js/src";
-import "darkmode-js"
 
 export default class extends Controller {
 
-    _darkmode;
-
     connect() {
-        if (typeof window.getComputedStyle(document.body).mixBlendMode == 'undefined') {
-            console.warn("The browser does not support mix blend mode. Darkmode will not work.");
+        this.setMode(this.getMode());
+        document.querySelectorAll('input[name="darkmode"]').forEach((radio) => {
+            radio.addEventListener('change', this._radioChanged.bind(this));
+        });
+    }
+
+    /**
+     * Event listener for the change of radio buttons
+     * @private
+     */
+    _radioChanged(event) {
+        const new_mode = this.getSelectedMode();
+        this.setMode(new_mode);
+    }
+
+    /**
+     * Get the current mode from the local storage
+     * @return {'dark', 'light', 'auto'}
+     */
+    getMode() {
+        return localStorage.getItem('darkmode') ?? 'auto';
+    }
+
+    /**
+     * Set the mode in the local storage and apply it and change the state of the radio buttons
+     * @param mode
+     */
+    setMode(mode) {
+        if (mode !== 'dark' && mode !== 'light' && mode !== 'auto') {
+            console.warn('Invalid darkmode mode: ' + mode);
+            mode = 'auto';
+        }
+
+        localStorage.setItem('darkmode', mode);
+
+        this.setButtonMode(mode);
+
+        if (mode === 'auto') {
+            this._setDarkmodeAuto();
+        } else if (mode === 'dark') {
+            this._enableDarkmode();
+        } else if (mode === 'light') {
+            this._disableDarkmode();
+        }
+    }
+
+    /**
+     * Get the selected mode via the radio buttons
+     * @return {'dark', 'light', 'auto'}
+     */
+    getSelectedMode() {
+        return document.querySelector('input[name="darkmode"]:checked').value;
+    }
+
+    /**
+     * Set the state of the radio buttons
+     * @param mode
+     */
+    setButtonMode(mode) {
+        document.querySelector('input[name="darkmode"][value="' + mode + '"]').checked = true;
+    }
+
+    /**
+     * Enable darkmode by adding the data-bs-theme="dark" to the html tag
+     * @private
+     */
+    _enableDarkmode() {
+        //Add data-bs-theme="dark" to the html tag
+        document.documentElement.setAttribute('data-bs-theme', 'dark');
+    }
+
+    /**
+     * Disable darkmode by adding the data-bs-theme="light" to the html tag
+     * @private
+     */
+    _disableDarkmode() {
+        //Set data-bs-theme to light
+        document.documentElement.setAttribute('data-bs-theme', 'light');
+    }
+
+
+    /**
+     * Set the darkmode to auto and enable/disable it depending on the system settings, also add
+     * an event listener to change the darkmode if the system settings change
+     * @private
+     */
+    _setDarkmodeAuto() {
+        if (this.getMode() !== 'auto') {
             return;
         }
 
-        try {
-            const darkmode = new Darkmode();
-            this._darkmode = darkmode;
-
-            //Unhide darkmode button
-            this._showWidget();
-
-            //Set the switch according to our current darkmode state
-            const toggler = document.getElementById("toggleDarkmode");
-            toggler.checked = darkmode.isActivated();
-        }
-        catch (e)
-        {
-            console.error(e);
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            this._enableDarkmode();
+        } else {
+            this._disableDarkmode();
         }
 
-
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+            console.log('Prefered color scheme changed to ' + event.matches ? 'dark' : 'light');
+            this._setDarkmodeAuto();
+        });
     }
 
-    _showWidget() {
-        this.element.classList.remove('hidden');
-    }
-
-    toggleDarkmode() {
-        this._darkmode.toggle();
+    /**
+     * Check if darkmode is activated
+     * @return {boolean}
+     */
+    isDarkmodeActivated() {
+        return document.documentElement.getAttribute('data-bs-theme') === 'dark';
     }
 }