文章

黑暗模式

黑暗模式

黑暗模式

黑暗模式

自动更新原生界面

“本地界面”包括文件选择器、窗口边框、对话框、上下文 菜单等 - 任何UI来自操作系统而非应用的界面。 默认行为是从操作系统选择自动主题。

自动更新您自己的界面

如果您的应用有自己的黑暗模式,您应该在与系统黑暗模式设置同步时切换。 您可以通过使用[prefer-color-scheme] CSS 媒体查询来做到这一点。

1
2
3
4
5
6
7
@media (prefers-color-scheme: dark) {
  body { background: #333; color: white; }
}

@media (prefers-color-scheme: light) {
  body { background: #fff; color: black; }
}

prefers-color-scheme 检测用户是否有将系统的主题色设置为亮色或者暗色。

手动更新您自己的界面

……

本文由作者按照 CC BY 4.0 进行授权