Raw Source Toggle Dropdown

• Minified Source

Mr_FJ / XKCD dark theme

// ==UserScript==
// @namespace    https://openuserjs.org/users/Mr_FJ
// @name         XKCD dark theme
// @description  Gives the XKCD page a dark overhaul.
// @copyright    2023, Mr_FJ (https://openuserjs.org/users/Mr_FJ)
// @grant        none
// @license      MIT
// @version      1.1
// @updateURL    https://openuserjs.org/meta/Mr_FJ/XKCD_dark_theme.meta.js
// @downloadURL  https://openuserjs.org/install/Mr_FJ/XKCD_dark_theme.user.js
// @match        https://*.xkcd.com/*
// ==/UserScript==

// ==OpenUserJS==
// @author Mr_FJ
// ==/OpenUserJS==

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}
function addBodyStyle() {
    var style;
    style = document.createElement('style');
    style.type = 'text/css';
    document.body.appendChild(style);
}
function getImagesByAlt(alt) {
    var allImages = document.getElementsByTagName("img");
    var images = [];
    for (var i = 0, len = allImages.length; i < len; ++i) {
        if (allImages[i].alt == alt) {
            images.push(allImages[i]);
        }
    }
    return images;
}
(function() {
    addBodyStyle();
    getImagesByAlt("xkcd.com logo")[0].setAttribute("id", "xkcdLogo");
    document.body.style.background = "black";
    addGlobalStyle('#bgLeft { background-color: #111111 !important; color: #EEEEEE !important;}');
    addGlobalStyle('#bgRight { background-color: #111111 !important; color: #EEEEEE !important;}');
    addGlobalStyle('#middleContainer { background-color: #111111 !important; color: #EEEEEE !important;}');
    addGlobalStyle('#bottom { background-color: #111111 !important; color: #EEEEEE !important;}');
    addGlobalStyle('#topLeft a { color: #697c9e !important;}');
    addGlobalStyle('#xkcdNews { color: #697c9e !important;}');
    addGlobalStyle('#slogan { color: #EEEEEE !important;}');
    addGlobalStyle('.comicNav li a { color: #FAFAFA !important;}');
    addGlobalStyle('.comicNav li a { color: #FAFAFA !important;}');
    addGlobalStyle('#xkcdLogo { filter: invert(1);}');
    addGlobalStyle('#htNews { color: #FAFAFA !important;}');
})();