暗黑模式是一种补充模式，可用于在 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
}