暗色模式是一种补充模式，可用于在UI上显示大部分暗色表面。该设计减少了设备屏幕发出的光，同时保持了可读性所需的最小颜色对比度。

暗色模式的优点是：

• 通过减少眼睛疲劳来增强视觉人体工程学。
• 提供夜间或黑暗环境中的舒适使用。
• 主要在设备屏幕为OLED或AMOLED的情况下节省电池电量，从而可以长时间使用设备而无需充电。

它能做什么

1. 它为页面设置默认的暗色背景（您可以使用body.body--dark选择器通过CSS轻松覆盖该背景）
2. 所有具有dark属性的Quasar组件将自动将此属性设置为true。无需手动进行。

自动检测通过查看prefers-color-scheme: dark媒体查询来进行，并且是动态的。如果您的应用程序在运行时客户端浏览器/平台切换到暗色模式，则它还将更新Quasar的暗色模式（如果暗色模式设置为auto）。

如何使用它

您可以通过暗色插件在暗色模式和亮色模式（默认）之间轻松切换。

如何设计您的应用

由于您的应用程序可以处于暗色模式，也可以不处于暗色模式，因此您可以利用带有body标签的CSS类轻松地设置样式：body--light或者body--dark。 也就是说，如果您想同时支持两种模式。

.body--light {
  /* ... */
}

.body--dark {
  /* ... */
}

您是否要覆盖默认的暗色模式页面背景色：

body.body--dark {
  background: #000
}