MediaWiki:Gadget-darkmode.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * RemiliaWiki Dark Mode Toggle
 */
(function() {
    'use strict';
    
    var STORAGE_KEY = 'remiliawiki-darkmode';
    var LINK_ID = 'pt-darkmode';

    function setTheme(dark) {
        document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
        localStorage.setItem(STORAGE_KEY, dark ? '1' : '0');
        var link = document.querySelector('#' + LINK_ID + ' a');
        if (link) {
            link.textContent = dark ? '☼' : '☽';
            link.title = dark ? 'Switch to light mode' : 'Switch to dark mode';
        }
    }

    var saved = localStorage.getItem(STORAGE_KEY);
    var isDark = saved === '1';
    
    if (isDark) {
        document.documentElement.setAttribute('data-theme', 'dark');
    }

    $(function() {
        // Enable transitions only after page is ready
        setTimeout(function() {
            document.body.classList.add('darkmode-transitions');
        }, 100);

        var link = mw.util.addPortletLink(
            'p-personal',
            '#',
            isDark ? '☼' : '☽',
            LINK_ID,
            isDark ? 'Switch to light mode' : 'Switch to dark mode'
        );
        
        if (link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                var currentlyDark = document.documentElement.getAttribute('data-theme') === 'dark';
                setTheme(!currentlyDark);
            });
        }
    });
})();