我如何在没有框架的PWA中实现暗模式？

Question

我正在为iOS和android构建PWA，但是我没有使用框架（这是一个非常基本的应用，因此应用规模是一个大问题）。我想实现暗模式，以便当用户将设备切换到暗模式时，应用程序主题也会更改为暗。我该怎么做？

我正在回答自己的问题-这是为了帮助遇到相同问题的其他人！

Answer 1

我已经坚持了一段时间，我认为我找到了一个很好的解决方案。以前，我曾使用ionic 4框架，其文档中包含一个有趣的页面，其中涉及向PWA添加暗模式。链接here

它讨论了一个CSS选择器，该选择器可以检测用户设备何时在黑暗模式下运行，并相应地更改元素样式。从文档：

启用深色模式的第一种方法是使用CSS媒体查询获取用户首选的配色方案。如果启用了暗模式，此媒体查询将挂接到用户设备的系统设置并应用主题。

@media (prefers-color-scheme: dark) {
  :root {
    /* dark mode variables go here */
  }
}

[当前，prefers-color-scheme媒体查询的浏览器支持有限，因此，在某些浏览器中，使用此媒体查询应用暗模式将使用户无法受益。但是，仍然可以通过使用CSS类回退来应用暗模式。

/* Fallback for older browsers or manual mode */
body.dark {
  /* Dark mode variables go here */
}

我已经在iOS 13和iPadOS的PWA中对此进行了测试，当我将设备更改为暗模式时，它们都可以正常工作。我不确定android，但我希望结果会一样。

同样值得注意的是，您可以通过应用启用应用的暗模式设置（例如，应用中具有设置，因此即使设备未安装，应用也可能是暗的）。文档页面下方的demo很好地展示了这一点。

希望这可以帮助您开始使用黑暗模式！