暗色模式

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

暗色模式的优点是：

• 通过减少眼睛疲劳来增强视觉人体工程学。
• 对眼睛保护也很重要。
• 在夜间或黑暗环境中提供舒适的使用体验。
• 如果设备屏幕是 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;
}

暗黑模式下的阴影

v2.31+

处于暗黑模式时，Quasar 会用浅色的阴影颜色（shadow-N 辅助类，以及 QCard、QMenu、QTable 或 QLayout 的页眉、页脚、抽屉等组件的阴影）来绘制立体感，而不是亮色模式下使用的黑色。这两种颜色都是声明在 :root 上的 CSS 自定义属性，因此你无需改动 Sass 变量即可修改它们，这也让它们对 UMD、Vite 插件以及任何消费预构建 CSS 的形态都可用：

/* 暗黑模式下也用深色阴影（v2.11 之前 Quasar 的外观） */
body.body--dark {
  --q-dark-shadow-color: #000;
}

/* 或者暗黑模式下完全不要立体感阴影 */
body.body--dark {
  --q-dark-shadow-color: transparent;
}

请把它们设置在 :root 或 body 上（如上例的 body.body--dark 规则，或使用会写到 body 上的 setCssVar 辅助函数）。阴影色调是在 body 层级从它们派生出来的，因此放在 DOM 更深处的覆盖不会生效。带深色表面（dark 属性）的组件无论暗黑模式状态如何都使用 --q-dark-shadow-color。

视频讲解

B 站视频讲解