如何在没有框架的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很好地展示了这一点。

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