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

¥Dark Mode is a supplemental mode that can be used to display mostly dark surfaces on the UI. The design reduces the light emitted by device screens while maintaining the minimum color contrast ratios required for readability.

暗黑模式的优势在于：

¥The advantages of Dark Mode are that:

• 它通过减少眼疲劳来增强视觉人机工程学。

  ¥It enhances visual ergonomics by reducing eye strain.

• 它对于保护眼睛也很重要。

  ¥It is important for eye protection also.

• 确保在夜间或黑暗环境下也能舒适使用。

  ¥Provides comfort of use at night or in dark environments.

• 如果设备屏幕是 OLED 或 AMOLED，它主要可以节省电池电量，从而使设备无需充电即可长时间使用。

  ¥It conserves battery power mainly if the device screen is OLED or AMOLED, thereby enabling device usage for longer periods without charging.

它的作用(What it does)

¥What it does

1. 它为页面设置默认的深色背景（你可以使用 body.body--dark 选择器通过 CSS 轻松覆盖）

   ¥It sets a default dark background for the pages (that you can easily override through CSS with the body.body--dark selector)

2. 所有具有 dark 属性的 Quasar 组件都将自动将其设置为 true。无需手动操作。

   ¥All Quasar components with a dark property will have it automatically set to true. No need to do it manually.

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

¥The auto-detection works by looking at prefers-color-scheme: dark media query and is dynamic. If the client browser/platform switches to/from Dark mode while your app is running, it will also update Quasar’s Dark mode (if Dark mode is set to auto).

如何使用(How to use it)

¥How to use it

你可以通过 暗黑插件 轻松地在夜间模式和亮模式（默认模式）之间切换。

¥You can easily switch between Dark mode and light mode (which is default) through the Dark Plugin.

如何设计你的应用(How to style your app)

¥How to style your app

由于你的应用可以启用或禁用暗黑模式，你可以利用 body 标签附加的 CSS 类轻松地为其设置样式：body--light 或 body--dark。如果你想同时支持这两种模式的话。

¥Since your app can be in Dark mode or not, you can easily style it by taking advantage of the body tag attached CSS class: body--light or body--dark. That is if you want to support both modes.

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

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

如果你希望覆盖默认的暗黑模式页面背景颜色：

¥Should you wish to override the default Dark mode page background color:

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