First draft of working NBN theme for mediawiki

resources/scripts/nextbestnetwork/darkmode.js

@@ -1,82 +1,71 @@
 /*!
  * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2025 The Bootstrap Authors
- * Licensed under the Creative Commons Attribution 3.0 Unported License.
  */
+$(document).ready(() => {
+    console.log("DOM fully loaded and parsed");
 
-(() => {
-    'use strict'
-
-    const getStoredTheme = () => localStorage.getItem('theme')
-    const setStoredTheme = theme => localStorage.setItem('theme', theme)
+    const getStoredTheme = () => localStorage.getItem('theme');
+    const setStoredTheme = theme => localStorage.setItem('theme', theme);
 
     const getPreferredTheme = () => {
-        const storedTheme = getStoredTheme()
-
-        console.log("Found stored theme: ", storedTheme);
+        const storedTheme = getStoredTheme();
+        console.log("Found stored theme:", storedTheme);
         if (storedTheme) {
-            return storedTheme
+            return storedTheme;
         }
-
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-    }
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    };
 
     const setTheme = theme => {
         if (theme === 'auto') {
-            document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+            $('html').attr('data-bs-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
         } else {
-            document.documentElement.setAttribute('data-bs-theme', theme)
+            $('html').attr('data-bs-theme', theme);
         }
-    }
-
-    setTheme(getPreferredTheme())
+    };
 
     const showActiveTheme = (theme, focus = false) => {
-        const themeSwitcher = document.querySelector('#bd-theme')
-
-        if (!themeSwitcher) {
-            return
+        const themeSwitcher = $('#bd-theme');
+        if (!themeSwitcher.length) {
+            console.warn("Theme switcher (#bd-theme) not found in DOM.");
+            return;
         }
 
-        const themeSwitcherText = document.querySelector('#bd-theme-text')
-        const activeThemeIcon = document.querySelector('.theme-icon-active use')
-        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-        const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+        const themeSwitcherText = $('#bd-theme-text');
+        const activeThemeIcon = $('.theme-icon-active use');
+        const btnToActive = $(`[data-bs-theme-value="${theme}"]`);
 
-        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-            element.classList.remove('active')
-            element.setAttribute('aria-pressed', 'false')
-        })
+        const svgOfActiveBtn = btnToActive.find('svg use').attr('href');
+        $('[data-bs-theme-value]').removeClass('active').attr('aria-pressed', 'false');
+        btnToActive.addClass('active').attr('aria-pressed', 'true');
+        activeThemeIcon.attr('href', svgOfActiveBtn);
 
-        btnToActive.classList.add('active')
-        btnToActive.setAttribute('aria-pressed', 'true')
-        activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
-        themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+        const themeSwitcherLabel = `${themeSwitcherText.text()} (${btnToActive.data('bs-theme-value')})`;
+        themeSwitcher.attr('aria-label', themeSwitcherLabel);
 
         if (focus) {
-            themeSwitcher.focus()
+            themeSwitcher.focus();
         }
-    }
+    };
 
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-        const storedTheme = getStoredTheme()
-        if (storedTheme !== 'light' && storedTheme !== 'dark') {
-            setTheme(getPreferredTheme())
+    console.log("Setting initial theme...");
+    setTheme(getPreferredTheme());
+    showActiveTheme(getPreferredTheme());
+
+    $('[data-bs-theme-value]').on('click', function () {
+        const theme = $(this).data('bs-theme-value');
+        console.log("Theme changed to:", theme);
+        setStoredTheme(theme);
+        setTheme(theme);
+        showActiveTheme(theme, true);
+    });
+
+    window.matchMedia('(prefers-color-scheme: dark)').on('change', () => {
+        const storedTheme = getStoredTheme();
+        if (!storedTheme || storedTheme === 'auto') {
+            setTheme(getPreferredTheme());
         }
-    })
+    });
 
-    window.addEventListener('DOMContentLoaded', () => {
-        showActiveTheme(getPreferredTheme())
-
-        document.querySelectorAll('[data-bs-theme-value]')
-            .forEach(toggle => {
-                toggle.addEventListener('click', () => {
-                    const theme = toggle.getAttribute('data-bs-theme-value')
-                    setStoredTheme(theme)
-                    setTheme(theme)
-                    showActiveTheme(theme, true)
-                })
-            })
-    })
-})()
+    console.log("Theme toggler initialized!");
+});

resources/scripts/nextbestnetwork/nextbestnetwork.js

@@ -1,5 +1,6 @@
-jQuery(document).ready(function ($) {
+console.log("parse nextbestnetwork.js");
 
+jQuery(document).ready(function ($) {
   /**
    * TOOLTIPS
    */