MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 112: / Line 112: @@
      $(document).keydown(function(e) {
          if (e.key === "Escape") closeModal();
+    });
+});
+/* ============================================================
+   --- FORCE TOC THEME UPDATE ---
+   Watches the HTML tag for theme changes and forces a class
+   onto the TOC to ensure it switches styles instantly.
+   ============================================================ */
+$(function() {
+    // 1. Identify the TOC (Standard or Vector 2022)
+    var tocSelector = '#toc, .vector-toc, .mw-parser-output .toc';
+    // 2. The function that decides if we are Dark or Light
+    function updateTOC() {
+        var $html = $('html');
+        var $toc = $(tocSelector);
+        // Check if "Night" class is active
+        var isNight = $html.hasClass('skin-theme-clientpref-night');
+        // Check if "OS" class is active AND system is Dark
+        var isOS = $html.hasClass('skin-theme-clientpref-os');
+        var systemDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (isNight || (isOS && systemDark)) {
+            // FORCE DARK MODE
+            $toc.addClass('force-dark-mode');
+        } else {
+            // REVERT TO LIGHT
+            $toc.removeClass('force-dark-mode');
+        }
+    }
+    // 3. Run immediately on load
+    updateTOC();
+    // 4. Watch for changes (User toggles the switch)
+    var observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.attributeName === "class") {
+                updateTOC();
+            }
+        });
+    });
+    // Start observing the <html class="..."> attribute
+    observer.observe(document.documentElement, {
+        attributes: true
      });
 });