html - 高效的暗模式主题与移动 HTML 的切换

Question

我一直在寻找拥有移动高效暗模式主题的方法，它既是自动的又可以切换。我所说的移动高效是指高延迟、低带宽、低 CPU 友好性:

• 仅加载相关样式表(当浅色处于事件状态时，不加载深色样式表，反之亦然)以节省带宽
• 无全屏闪烁
• 没有cookie

我发现的解决方案没有这些属性，它们要么使用将两个主题组合在一起的胖 CSS，要么使用两个样式表，当用户选择不同于系统默认(因为它们是通过在 DOM 中引用样式表之后执行的 JS 控制的)。

到目前为止，我最好的选择是“高效”，但依赖于 document.write 在文档头部的一个小内联脚本中，它是这样的:

let theme = localStorage.getItem("theme");
if (!theme) {
   theme = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches)?"dark":"light"
}
if (theme == "dark") {
   document.write('<link rel="stylesheet" href="dark.theme.css" />');
} else {
   document.write('<link rel="stylesheet" href="light.theme.css" />');
}

当用户手动切换时，localStorage 条目由常规 JS 管理。

我已经尝试了所有改变链接 DOM 元素的方法，但它们都失败了，导致闪烁或延迟 CSS 加载(未呈现的 HTML 暂时可见)。

我想知道是否有一种方法仍然有效，支持切换而不依赖于 document.write ？

Answer 1

向 html 标签添加一个类“is-dark”怎么样？为了使您的 css 尽可能精简，您可以将所有颜色定义为 css 自定义属性，并在“is-dark”的范围内重新定义它们。因此，您只需两次交付这些自定义属性，这应该是可管理的。

你仍然需要 JS 来添加类，但你不需要 document.write。这将在三种情况中的两种情况下消除闪烁，即当媒体查询选择深色主题时以及使用开关选择深色主题时。

所以这看起来像这样:

:root {
  --clr-primary:                      #8e211a;
  --clr-secondary:                    #5e737a;
…
}


.is-dark {
  --clr-primary:                      black;
  --clr-secondary:                    white;
}


.myElement {
  color: var(--clr-secondary);
  background-color: var(--clr-primary);
}

这给我们留下了第三种情况的问题:当重新加载之前每个开关都选择了深色主题时，重新加载后会闪烁。在这种情况下，将使用浅色主题，直到 JS 命中并将其切换为深色主题。

最好的办法似乎是阻止页面呈现，直到 JS 准备就绪，如以下线程所示:Dark mode flickers a white background for a millisecond on reload