☰

AP News Dark Mode

Changes the styling of AP News to be darker

// ==UserScript==
// @name         AP News Dark Mode
// @namespace    http://tampermonkey.net/
// @version      2025-05-25
// @description  Changes the styling of AP News to be darker
// @author       Cherokee Parker
// @license      MIT
// @match        *://apnews.com/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

(function() {
    /**
     * Tries to invert media (images, videos, and quizzes) colors if not already inverted.
     * @param {Element} parentElem - The element whose children should be inverted.
     */
    function tryInvertMedia(parentElem) {
        // Invert images
        const images = parentElem.getElementsByTagName("img");
        if (images) {
            images.forEach((image) => {
                if (!image.classList.contains("invert")) {
                    image.classList.add("invert");
                }
            });
        }

        // Invert videos
        const videos = parentElem.getElementsByClassName("jw-wrapper");
        if (videos) {
            videos.forEach((video) => {
                if (!video.classList.contains("invert")) {
                    video.classList.add("invert");
                }
            });
        }

        // Invert quizzes
        const quizzes = parentElem.getElementsByTagName("riverdrop-quiz");
        if (quizzes) {
            quizzes.forEach((quiz) => {
                if (!quiz.classList.contains("invert")) {
                    quiz.classList.add("invert");
                }
            });
        }
    }

    // Let's define the CSS classes we'll use
    const css = `
          .invert {
                filter: invert(100);
          }
    `;
    GM_addStyle(css);

    // Now we need the topmost page element we want to apply styling to
    let pageDiv = document.getElementsByClassName("Page-twoColumn")[0];
    pageDiv = pageDiv ? pageDiv : document.getElementsByClassName("Page-oneColumn")[0];
    if (!pageDiv) {
        return;
    }

    // Now let's style it!
    pageDiv.style.background = "white";
    pageDiv.classList.add("invert");
    tryInvertMedia(pageDiv); // Media shouldn't be inverted, so invert them again
    setInterval(() => {tryInvertMedia(pageDiv)}, 250); // Some media are dynamically loaded after this script, so catch them
})();