暗色模式
暗色模式是一种补充模式,可用于在UI上显示大部分暗色表面。该设计减少了设备屏幕发出的光,同时保持了可读性所需的最小颜色对比度。
暗色模式的优点是:
- 通过减少眼睛疲劳来增强视觉人体工程学。
- 提供夜间或黑暗环境中的舒适使用。
- 主要在设备屏幕为OLED或AMOLED的情况下节省电池电量,从而可以长时间使用设备而无需充电。
它能做什么
- 它为页面设置默认的暗色背景(您可以使用
body.body--dark
选择器通过CSS轻松覆盖该背景) - 所有具有
dark
属性的Quasar组件将自动将此属性设置为true
。无需手动进行。
自动检测通过查看prefers-color-scheme: dark
媒体查询来进行,并且是动态的。如果您的应用程序在运行时客户端浏览器/平台切换到暗色模式,则它还将更新Quasar的暗色模式(如果暗色模式设置为auto
)。
如何使用它
您可以通过暗色插件在暗色模式和亮色模式(默认)之间轻松切换。
如何设计您的应用
由于您的应用程序可以处于暗色模式,也可以不处于暗色模式,因此您可以利用带有body
标签的CSS类轻松地设置样式:body--light
或者body--dark
。 也就是说,如果您想同时支持两种模式。
.body--light {
/* ... */
}
.body--dark {
/* ... */
}
您是否要覆盖默认的暗色模式页面背景色:
body.body--dark {
background: #000
}