如何立即加载深色主题答案

【问题标题】：How to load dark theme without an delay如何立即加载深色主题
【发布时间】：2020-02-12 21:01:00
【问题描述】：

我正在创建一个具有暗模式主题功能的网页。我得到了我定义暗模式类的 bundle.css。我正在使用 javascript onclick 事件来设置 cookie 值，如果重新加载后该值为 true，则 javascript 将在 body 元素上生成类。但是，如果我重新加载页面，最初的样式将首先加载，这样我可以在几毫秒内看到白色背景（浅色主题），然后加载深色主题。而这种延迟是一个问题。

我也尝试将我的 JavaScript 添加到头部，但是，它并没有解决问题。我在这个项目中使用 webpack。 css、js、html文件分为模块。

我的问题是： 是否有任何解决方案或方法可以通过使用 javascript 快速加载深色主题而不会出现这种延迟或白色闪烁背景？或者这里需要后端？感谢您的建议。

【问题讨论】：

你可以让页面保持加载状态，直到你读取cookie值，也许。
@HarunYilmaz 这是我试图避免的事情。因为我正在为当地报纸创建一个站点，而长时间加载或任何加载动画是他们实际上不想听到的。这个网络link 是我正在尝试创建的暗模式的一个很好的例子。但是，他们头脑中的 javascript 似乎并不完整。
一个漂亮的加载器可以帮助你改变样式的间隔
无延迟 = 服务器设置值。
@media (prefers-color-scheme: dark) { }

标签： javascript jquery html css cookies

【解决方案1】：

我认为，要走的路是在加载 css 文件之前替换它，我使用 smarty 模板引擎并创建一个替换 css 路径的变量。唯一的问题是，如果您更改主题，您需要重新加载一次，所以没有即时颜色交换。

【讨论】：

感谢您的提示！你的建议实际上比大多数互联网对我的帮助更大：D 也许我只是需要动动脑筋。我创建了另一个带有暗模式值的 bundle.css，然后创建了一个简短的 javascript 来检查 cookie，并根据 cookie 禁用或启用样式表。需要重新加载，但不是问题，尤其是在没有延迟直接加载暗模式的情况下。再次感谢。 :)

【解决方案2】：

我稍微改变了处理暗模式的方式：我仍然使用模板引擎，它为没有内容的页面提供模板。模板引擎在显示网站本身之前会执行一个 php 脚本，所以我首先检查暗模式，然后如果启用（例如设置了 Cookie），我将 dark 类添加到 body 同时显示 html （所以没有延迟）。因此，您想要更改的每个 css 类都可以像这样处理

body.dark .text1 
{
   color: #fffff;
}

所以它将覆盖 .text1 的颜色。使用 body.dark 还可以让您立即更改主题，而无需重新加载页面并且没有延迟。您可以使用 JS 动态添加和删除 dark 类，并且每个以 body.dark 作为前缀的类都会在添加 dark 时发生变化> 类到网站的body。如果您想查看更详细的示例，请随时询问。

【讨论】：