Webpack light mode script for tampermonkey

webpack-light-mode.js

// ==UserScript==
// @name         Webpack Error Screen Light Mode
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       EgoistDeveloper
// @match        http://localhost:4200/*
// @icon         https://cdn-icons-png.flaticon.com/512/7979/7979660.png
// @grant        none
// ==/UserScript==

(function () {
    "use strict";

    // overwrite with custom CSS
    function forceToLightMode() {
        // if browser is not in dark mode, force it to be
        if (
            window.matchMedia &&
            !window.matchMedia("(prefers-color-scheme: dark)").matches
        ) {
            const styleElement = document.createElement("style");
            styleElement.textContent = `#webpack-dev-server-client-overlay-div {
                background-color: rgb(243 243 243 / 85%) !important;
                color: rgb(0 0 0) !important;
            }`;

            const iframeElement = document.getElementById("webpack-dev-server-client-overlay");

            if (iframeElement != null || iframeElement) {
                const iframeOverlay = iframeElement.contentWindow.document.getElementsByTagName("head");

                iframeOverlay[0].appendChild(styleElement);
            }
        }
    }

    setTimeout(() => {
        forceToLightMode();
    }, 200);

    setInterval(() => {
        forceToLightMode();
    }, 3000);
})();