我创建了一个ASP.NET Core MVC Web应用程序，并在.css中添加了var颜色，我通过此JavaScript代码更改了颜色。每次重新加载页面时，都会有一个小的（几毫秒）明显的 Flink ，从默认颜色到我设置的浅色或深色主题。是什么原因导致了这个问题，我如何解决这个问题？这是由ASP.NET Core MVC项目的引导样板和脚手架视图引起的吗？

const root = document.querySelector(":root");
const themeIcon = document.querySelector(".themeicon");
const storageTheme = localStorage.getItem("theme");

if (storageTheme === "dark" || storageTheme === "light")
    setTheme(storageTheme);
else if (window.matchMedia("(prefers-color-scheme: dark)").matches)
    setTheme("dark");
else
    setTheme("light");

function setTheme(theme) {
    root.style.setProperty("--bg-color", theme === "light" ? "#ffffff" : "#161618");
    root.style.setProperty("--text-color", theme === "light" ? "#1a1a1a" : "#ffffff");
    localStorage.setItem("theme", theme);
}

themeIcon.addEventListener("click", function () {
    localStorage.getItem("theme") === "light"
        ? setTheme("dark")
        : setTheme("light");
});

字符串