MediaWiki:Common.js/User:Fumple/DarkMode.js

$(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. The ability to use DarkMode without an account will come later."); }   else { // Get the options var darkmodestatus = mw.user.options.get("gadget-dark-vector"); 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 = ""; $("#darkmodebox").html(           "DarkMode is currently " + (darkmodestatus == "1" ? "enabled" : "disabled") + ". " +           " "        );

// 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(" "); $("#fpl-skinchangecontainer").append(" You can revert the change by going to Preferences -> Appearance"); }

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