Admin: Disable dark mode JS

2026-02-18T21:16:15Z

Disable dark mode JS

← Older revision		Revision as of 21:16, 18 February 2026
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);~~
	}
	~~});~~
	~~})();~~

Admin: Add dark mode toggle with OS preference detection

2026-02-18T21:06:51Z

Add dark mode toggle with OS preference detection

New page

/* ===== DARK MODE TOGGLE ===== */
(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);
}
});
})();

MediaWiki:Common.js - Revision history

Admin: Disable dark mode JS

Admin: Add dark mode toggle with OS preference detection