暗色模式是一种补充模式，可用于在界面上显示主要为深色的表面。这种设计减少了设备屏幕发出的光，同时保持最低的颜色对比度以确保可读性。

暗色模式的优点是：

• 通过减少眼睛疲劳来增强视觉人体工程学。
• 对眼睛保护也很重要。
• 在夜间或黑暗环境中提供舒适的使用体验。
• 如果设备屏幕是 OLED 或 AMOLED，可以节省电池电量，从而延长设备使用时间而无需充电。

功能

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

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

如何使用

您可以通过 Dark Plugin 轻松切换暗色模式和亮色模式（默认为亮色模式）。

如何设置应用样式

由于您的应用可以在暗色模式或非暗色模式下运行，您可以通过利用附加到 body 标签的 CSS 类来轻松设置样式：body--light 或 body--dark。如果您想支持两种模式。

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

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

如果您想覆盖默认的暗色模式页面背景颜色：

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

视频讲解

B 站视频讲解