Medium Dark Mode

script.js

// ==UserScript==
// @name         medium-dark
// @namespace    plugfox
// @version      2024-03-19
// @description  Dark Mode for Medium
// @author       plugfox
// @run-at       document-start
// @homepage     https://gist.github.com/PlugFox/0795e7ffb4fe4b190fafc734bc5a63a5
// @homepageURL  https://gist.github.com/PlugFox/0795e7ffb4fe4b190fafc734bc5a63a5
// @match        *://medium.com/*
// @exclude      *://medium.com/media/*
// @match        *://*.medium.com/*
// @exclude      *://*.medium.com/media/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==


const darkCSS = `
body {
    background-color: #1f1f1f !important;
    color: #E0E0E0 !important;
}

a {
    color: #BB86FC !important;
}

a:visited {
    color: #BB86FC !important;
}

a:hover, a:focus {
    color: #BB86FC !important;
}

div, p, h1, h2, h3, h4, h5, h6, ul, li {
    color: #E0E0E0 !important;
}

pre {
    background-color: #F9F9F9 !important;
}

hr {
    background-color: #E0E0E0 !important;
    color: #E0E0E0 !important;
}

button, input[type="button"], input[type="submit"] {
    background-color: #1f1f1f !important;
    color: #E0E0E0 !important;
    border: none !important;
    padding: 10px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    background-color: #1f1f1f !important;
    color: #E0E0E0 !important;
}

header, footer {
    background-color: #1F1B24 !important;
    color: #E0E0E0 !important;
}
`;

(function() {
    'use strict';
    //alert('hello');

    var style = document.createElement('style');
    style.type = 'text/css';


    if (style.styleSheet) {
        style.styleSheet.cssText = darkCSS;
    } else {
        style.appendChild(document.createTextNode(darkCSS));
    }

    document.head.appendChild(style);

    function changeStyles() {
        var allElements = document.body.getElementsByTagName("*");
        for (var i = 0; i < allElements.length; i++) {
            var el = allElements[i];
            var style = window.getComputedStyle(el);
            if (style.backgroundColor
                && style.backgroundColor !== "transparent"
                && style.backgroundColor !== "rgba(0, 0, 0, 0)"
                && style.backgroundColor !== "#1f1f1f") {
                el.style.backgroundColor = "#1f1f1f";
            }
            if (style.background
                && style.background !== "transparent"
                && style.background !== "rgba(0, 0, 0, 0)"
                && style.background !== "#1f1f1f") {
                if (el.style.background.startsWith('linear-gradient')) {
                    el.style.background = "transparent";
                } else {
                    el.style.background = "#1f1f1f";
                }
            }
        }
    }

    changeStyles();
    document.addEventListener("DOMContentLoaded", function() {
        changeStyles();
        for (var i = 1; i <= 5; i++) {
            setTimeout(function() {
                changeStyles();
            }, 150 * i);
        }
    });

    let timer;
    window.addEventListener('resize', function() {
        if (timer) clearTimeout(timer);
        changeStyles();
        timer = setTimeout(function() {
            changeStyles();
        }, 1000);
    });
})();