I'm trying to inject some CSS into an iFrame and it works fine except there is a delay before the new CSS takes effect, so you get a page that loads one theme and then changes color. It's only visible for a second, but it's annoying. Is there any way to delay the iFrame render until that CSS is applied? I add a script after the CSS, but seems that since I'm injecting this into the DOM, it renders then re-renders. I've tried using readyState interactive and complete to get it before load, but no luck and not sure how to delay it. Also tried addEventListener("load").

const frame_doc = document.getElementById("iframe").contentDocument;
function setFrameClass(light) {
    if (light) {
        frame_doc.body.classList.remove("dark")
    } else {
        frame_doc.body.classList.add("dark")
    }
}
themeSwitch.addEventListener('change', function () {
    setFrameClass(this.checked, frame_doc.body)
});
frame_doc.onreadystatechange = function () {
    if (frame_doc.readyState === 'interactive') {
        let link = frame_doc.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = new URL('rootstatic/css/dark.css', window.location.origin).href;
        link.media = 'all';
        frame_doc.head.appendChild(link);
        let s = frame_doc.createElement("script");
        s.type = "text/javascript";
        s.src = new URL('rootstatic/js/dark-mode.js', window.location.origin).href;
        frame_doc.head.appendChild(s);
        setFrameClass(themeSwitch.checked)
    }
}