暗色模式

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