User:Algorythmic/common.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/*
https://en.wikipedia.org/wiki/User:SD0001/dark-mode-toggle.js
[[User:SD0001/dark-mode-toggle.js]]
importScript('User:SD0001/dark-mode-toggle.js')
*/

/*
https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.util-method-addPortletLink
*/

/**
 * Enables or disables the dark mode gadget.
 */
0 &&
$.when(
	$.ready,
    mw.loader.using(['mediawiki.util', 'mediawiki.api'])
).then(function() {
    var inDarkMode = !!mw.user.options.get('gadget-dark-mode')
    var autoDarkMode = '1' === mw.storage.get('mw-darkmode-auto')
    var preferDarkMode = (
        window.matchMedia &&
        window.matchMedia('(prefers-color-scheme: dark)').matches
    )
    function toggleDarkMode() {
        new mw.Api().saveOption(
            'gadget-dark-mode',
            inDarkMode ? '0' : '1'
        ).then(function() { location.reload(); })
    }
    function applyAutoDarkMode() {
        if (autoDarkMode && (preferDarkMode != inDarkMode)) {
            toggleDarkMode()
        }
    }
    applyAutoDarkMode()
    /*
    https://en.wikipedia.org/wiki/Help:Customizing_toolbars
    */
    var portletId = 'p-personal'
    mw.util.addPortletLink(
        portletId,
        // href
        '#',
        // text
        autoDarkMode ? 'Manual dark' : 'Auto dark',
        // id
        'pt-darkmode-auto',
        // tooltip
        (autoDarkMode ? 'Turn off' : 'Turn on') + ' auto dark mode',
        // accesskey
        null,
        // nextnode
        '#pt-betafeatures'
    )
    mw.util.addPortletLink(
        portletId,
        // href
        '#',
        // text
        inDarkMode ? 'Light mode' : 'Dark mode',
        // id
        'pt-darkmode',
        // tooltip
        (inDarkMode ? 'Turn off' : 'Turn on') + ' dark mode',
        // accesskey
        null,
        // nextnode
        '#pt-betafeatures'
    )

    $('#pt-darkmode-auto').on('click', function(e) {
        e.preventDefault()
        mw.notify(
            (autoDarkMode ? 'Disabling' : 'Enabling') + ' auto dark mode'
        )

        autoDarkMode = !autoDarkMode
        mw.storage.set(
            'mw-darkmode-auto',
            autoDarkMode ? '1' : '0'
        )

        $('#pt-darkmode-auto a').text('...')
        applyAutoDarkMode()

        // If we didn't reload, update the link attributes
        $('#pt-darkmode-auto a').attr(
            'title',
            (autoDarkMode ? 'Turn off' : 'Turn on') + ' auto dark mode'
        )
        $('#pt-darkmode-auto a').text(
            autoDarkMode ? 'Manual dark' : 'Auto dark'
        )
    })
    $('#pt-darkmode').on('click', function(e) {
        e.preventDefault()
        mw.notify(
            (inDarkMode ? 'Disabling' : 'Enabling') + ' dark mode'
        );
        mw.storage.set(
            'mw-darkmode-auto',
            '0'
        )
        toggleDarkMode()
    })
})