高效的移动HTML暗黑模式主题切换。

Question

高效的移动HTML暗黑模式主题切换。

htmlcssmedia-queriesdarkmode

3

我一直在寻找一种既可以自动切换又可切换的移动端高效暗黑模式主题。通过“移动端高效”，我指的是高延迟、低带宽、低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？

- Eric Grange

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Floyd · Accepted Answer

如何将“is-dark”类添加到html标签中？为了使您的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