How to stop a flash of unwanted content in a css injection chrome extension

I'm trying to make my first Chrome browser extension which automatically runs a custom darkmode on a website I often use. It's working almost perfectly, but every time a new page is loaded there's a short flash of the original CSS before my updated version kicks in.

example of the flash

How do I reduce (or eliminate) this flash?

manifest.json:

{
    "name": "Ecosia Darkmode",
    "description": "Browse Ecosia in dark mode",
    "version": "1.0",
    "manifest_version": 2,
    "icons": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    },
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "permissions": ["https://www.ecosia.org/", "tabs"]
}

background.js:

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === "loading") {
        if (tab.url.includes("https://www.ecosia.org/")) {
            chrome.tabs.insertCSS(tabId, { file: "dark.css" }, () => {
                console.log("Converted to darkmode.");
            })
        }
    }
})

dark.css:

:root {
--color-background-primary: #202124!important; /* Background colour */
etc