我正在创建一个具有暗模式主题功能的网页。我将我的bundle.css定义为暗模式类。我正在使用javascript onclick事件设置Cookie值，如果重新加载后该值为true，则javascript将在body元素上生成类。但是，如果我重新加载页面，则首先将首先加载样式，这样我可以看到白色背景（浅色主题）几毫秒，然后加载深色主题。这个延迟是一个问题。
我也尝试将JavaScript添加到头部，但是并不能解决问题。我在这个项目中使用webpack。 Css，js和html文件分为模块。
我的问题是： 是否有任何解决方案或方法可以通过使用javascript快速加载深色主题而不会造成这种延迟或白色闪烁背景呢？还是这里需要后端？感谢您的建议。
答案 0 :(得分：0)
我认为，方法是在加载CSS文件之前先替换它，我使用了smarty模板引擎并创建了一个替换CSS路径的变量。唯一的问题是，如果更改主题，则需要重新加载一次，因此不会立即进行颜色交换。
答案 1 :(得分：0)
我稍微改变了处理暗模式的方式：我仍然使用一个模板引擎，该引擎具有一个没有内容的页面模板。模板引擎在显示网站本身之前会执行php脚本，因此我首先检查暗模式，然后如果启用了暗模式（例如已设置Cookie），则将暗类添加到 body ，同时显示html（因此请不要延迟）。因此，您想要更改的每个CSS类都可以像
body.dark .text1
{
color: #fffff;
}
，因此它将覆盖.text1的颜色。使用 body.dark 还可让您立即更改主题，而无需重新加载页面，而且没有延迟。您可以使用JS即时添加和删除 dark 类，并且当添加 dark 时，每个以 body.dark 为前缀的类都会发生变化。 >归类到网站的正文。如果您想查看更详细的示例，请随时提问。