|
|
| Line 1: |
Line 1: |
| /* ===== DARK MODE TOGGLE ===== */ | | /* Dark mode disabled — needs server-side implementation */ |
| (function() {
| |
| 'use strict';
| |
| | |
| function isDarkMode() {
| |
| return localStorage.getItem('mw-dark-mode') === '1' ||
| |
| (localStorage.getItem('mw-dark-mode') === null &&
| |
| window.matchMedia('(prefers-color-scheme: dark)').matches);
| |
| }
| |
| | |
| function setDarkMode(on) {
| |
| if (on) {
| |
| document.body.classList.add('mw-dark-mode');
| |
| localStorage.setItem('mw-dark-mode', '1');
| |
| } else {
| |
| document.body.classList.remove('mw-dark-mode');
| |
| localStorage.setItem('mw-dark-mode', '0');
| |
| }
| |
| updateButton();
| |
| }
| |
| | |
| function updateButton() {
| |
| var btn = document.getElementById('mw-dark-toggle');
| |
| if (btn) {
| |
| btn.textContent = document.body.classList.contains('mw-dark-mode') ? '☀️ Light' : '🌙 Dark';
| |
| }
| |
| }
| |
| | |
| // Apply immediately (before full load) to prevent flash
| |
| if (isDarkMode()) {
| |
| document.body.classList.add('mw-dark-mode');
| |
| }
| |
| | |
| // Add toggle button to the personal tools area
| |
| mw.loader.using('mediawiki.util', function() {
| |
| var btn = document.createElement('button');
| |
| btn.id = 'mw-dark-toggle';
| |
| btn.textContent = isDarkMode() ? '☀️ Light' : '🌙 Dark';
| |
| btn.title = 'Toggle dark mode';
| |
| btn.addEventListener('click', function() {
| |
| setDarkMode(!document.body.classList.contains('mw-dark-mode'));
| |
| });
| |
| | |
| // Try to place it near the search bar or personal tools
| |
| var target = document.querySelector('.vector-search-box') ||
| |
| document.querySelector('#p-personal') ||
| |
| document.querySelector('.mw-header');
| |
| if (target) {
| |
| target.parentNode.insertBefore(btn, target.nextSibling);
| |
| }
| |
| });
| |
| | |
| // Listen for OS-level dark mode changes
| |
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
| |
| if (localStorage.getItem('mw-dark-mode') === null) {
| |
| setDarkMode(e.matches);
| |
| }
| |
| });
| |
| })();
| |