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(function(e) {
     // 3. The Click Function
    $toggle.on('click', function(e) {
         e.preventDefault();
         e.preventDefault();
         $('body').toggleClass('dark-mode');
         $('body').toggleClass('dark-mode');
         // Save preference to local storage
       
         // 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-pref', isDark);
         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-pref') === 'true') {
     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');
    }
});