如何在没有框架的情况下将暗模式实现到 PWA 中？

Question

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

Answer 1

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

它谈到了一个 CSS 选择器，它可以检测用户设备何时处于运行深色模式，并相应地更改元素样式。来自文档：

The first way to enable dark mode is by using the CSS media query for the user's preferred color scheme. This media query will hook into the system setting of the user's device and apply the theme if a dark mode is enabled.

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

Currently, the prefers-color-scheme media query has limited browser support, so users will not be able to benefit from having the dark mode applied using this media query in certain browsers. However, the dark mode can still be applied by using a CSS class fallback.

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

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

同样值得注意的是，您可以通过该应用启用应用的深色模式设置（即在您的应用中设置一个设置，这样即使设备不在，您的应用也可以是深色的）。文档页面下方的 demo 很好地演示了这一点。

如何在没有框架的情况下将暗模式实现到 PWA 中？

How do I implement dark mode into a PWA with no framework?

html

ionic-framework

progressive-web-apps

ios-darkmode