在JS中插入CSS链接标记时阻止页面呈现

Question

我想允许我的用户在“轻”主题（默认）和“黑暗”主题之间进行选择，这是由添加另一个CSS文件提供的。

这是JavaScript代码。如您所见，我试图在将来提供其他主题。

var themeCssLink = document.getElementById('theme-css');
var theme = localStorage.getItem('theme');
if (!(theme in themes))
    theme = null;
if (theme !== null)
    themeCssLink.setAttribute('href', themes[theme]);

这个问题是在黑暗主题CSS加载之前页面呈现，导致明亮的白色闪光，我想知道如何防止。

我尝试的另一件事是在HTML中放置一个虚拟的LINK元素：

{{1}}

然后只修改JavaScript中的href：

{{1}}

不幸的是，这有同样的效果。

在加载主题CSS文件之前，如何说服浏览器阻止渲染？

Answer 1

只需将您的javascript脚本放在css之前，以便在主css之前加载主题。

如果你这样做，你必须对你的main.css很好，所以它不会覆盖之前加载的主题css。