MediaWiki:Common.js: Difference between revisions
From Lenn's Fun Stuff
Created page with "→Dark Mode Toggle: $(function() { var toggle = $('<li id="pt-darkmode"><span><a href="#">Toggle Dark Mode</a></span></li>'); $('#p-personal ul').append(toggle); toggle.click(function(e) { e.preventDefault(); $('body').toggleClass('dark-mode'); // Save preference to local storage var isDark = $('body').hasClass('dark-mode'); localStorage.setItem('dark-mode-pref', isDark); }); // Check for saved preference o..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Dark Mode Toggle */ | /* Dark Mode Toggle - Robust Version */ | ||
$(function() { | $(function() { | ||
var toggle = $('<li id="pt-darkmode"><span><a href="#">Toggle Dark Mode</a></span></li>'); | // 1. Create the toggle link | ||
$('#p-personal ul').append(toggle); | var $toggle = $('<li id="pt-darkmode"><span><a href="#">Toggle Dark Mode</a></span></li>'); | ||
// 2. Add it to the top right menu | |||
$('#p-personal ul').append($toggle); | |||
toggle.click | // 3. The Click Function | ||
$toggle.on('click', function(e) { | |||
e.preventDefault(); | e.preventDefault(); | ||
$('body').toggleClass('dark-mode'); | $('body').toggleClass('dark-mode'); | ||
// Save | |||
// Save the setting so it stays when you refresh | |||
var isDark = $('body').hasClass('dark-mode'); | var isDark = $('body').hasClass('dark-mode'); | ||
localStorage.setItem('dark-mode | localStorage.setItem('wiki-dark-mode', isDark ? 'enabled' : 'disabled'); | ||
console.log('Dark mode is now: ' + (isDark ? 'ON' : 'OFF')); | |||
}); | }); | ||
// Check for saved preference on load | // 4. Check for saved preference on page load | ||
if (localStorage.getItem('dark-mode | if (localStorage.getItem('wiki-dark-mode') === 'enabled') { | ||
$('body').addClass('dark-mode'); | $('body').addClass('dark-mode'); | ||
} | } | ||
}); | }); | ||
Revision as of 00:10, 12 March 2026
/* Dark Mode Toggle - Robust Version */
$(function() {
// 1. Create the toggle link
var $toggle = $('<li id="pt-darkmode"><span><a href="#">Toggle Dark Mode</a></span></li>');
// 2. Add it to the top right menu
$('#p-personal ul').append($toggle);
// 3. The Click Function
$toggle.on('click', function(e) {
e.preventDefault();
$('body').toggleClass('dark-mode');
// Save the setting so it stays when you refresh
var isDark = $('body').hasClass('dark-mode');
localStorage.setItem('wiki-dark-mode', isDark ? 'enabled' : 'disabled');
console.log('Dark mode is now: ' + (isDark ? 'ON' : 'OFF'));
});
// 4. Check for saved preference on page load
if (localStorage.getItem('wiki-dark-mode') === 'enabled') {
$('body').addClass('dark-mode');
}
});