MediaWiki:Common.js/User:Fumple/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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

$(function() {
    function changeOption(key, value) {
        new mw.Api().get({
            "action": "query",
            "format": "json",
            "meta": "tokens"
        })
            .done(function (data) {
                new mw.Api().post({
                    "action": "options",
                    "format": "json",
                    "optionname": key,
                    "optionvalue": value,
                    "token":data.query.tokens.csrftoken
                })
                    .done(function () {
                        $("#darkmodebox").html("Done! Refreshing the page!");
                        window.location.reload();
                    })
                    .fail(function (err) {
                        $("#darkmodebox").html("An unexpected error occured!");
                        console.log(err)
                    })
            })
            .fail(function (err) {
                $("#darkmodebox").html("An unexpected error occured while getting a token!");
                console.log(err)
            })
    }

    if (mw.user.getName() == null) {
        // Forgot I put the `will come later` here, dark mode without an account could be possible? But only with an extension
        // I mean you could force dark mode upon everyone with `prefers-color-scheme`, but...
        $("#darkmodebox").html("You can't use DarkMode as you aren't logged in.<br>The ability to use DarkMode without an account will come later.");
    }
    else {
        // Get the options
        var darkmodestatus = mw.user.options.get("gadget-darkmode");
        var currentskin = mw.user.options.get("skin");

        // If currentskin is empty or null, set a default value, because it's better than displaying nothing.
        // Although should current skin be ever empty? Better stay on the safe side
        if(currentskin == "" || currentskin == null) currentskin = "<site-default>";
        $("#darkmodebox").html(
            "DarkMode is currently " + (darkmodestatus == "1" ? "enabled" : "disabled") + ". <input id='darkmodechange' type='button' value='Change that'>" +
            "<div id='fpl-skinchangecontainer'></div>"
        );

        // If the current skin isn't vector, inform the user, that this won't work, unless they change it
        if(currentskin != "vector") {
            $("#fpl-skinchangecontainer").text("Your currently selected website skin is "+currentskin+", you must change to the vector skin for dark mode to work");
            $("#fpl-skinchangecontainer").append("<br/><input id='fpl-skinchange' type='button' value='Change the skin'>");
            $("#fpl-skinchangecontainer").append("<br/>You can revert the change by going to <a href='/wiki/Special:Preferences#mw-prefsection-rendering-skin'>Preferences -> Appearance</a>");
        }

        // Handle the clicks
        $("#darkmodechange").click(function () {
            $("#darkmodebox").html("Please wait!");
            changeOption("gadget-darkmode", darkmodestatus == "1" ? "0":"1");
        })
        $("#fpl-skinchange").click(function () {
            $("#darkmodebox").html("Please wait!");
            changeOption("skin", "vector");
        })
    }
})