1

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

4

1 回答 1

1

我已经坚持了一段时间了，我想我已经找到了一个很好的解决方案。以前我使用过 ionic 4 框架，他们的 Docs 包含一个关于向 PWA 添加暗模式的有趣页面。链接在这里

它讨论了一个 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，但我希望结果是一样的。

还值得注意的是，您可以通过应用启用应用的暗模式设置（即，在您的应用中有一个设置，因此即使设备没有，您的应用也可以是暗模式）。文档页面下方的演示很好地演示了这一点。

于 2019-10-27T10:10:55.543 回答