vant-weapp Calendar日历组件自定义颜色及暗黑深色模式

正常情况下,可以直接给日历组件中添加颜色:

color="#57be6b"

如下图:

vant-weapp Calendar日历组件自定义颜色及暗黑深色模式

如果要使用“暗黑深色模式”,就需要另外添加一个样式。

对于微信小程序,可以这样添加深色模式下的样式:

@media (prefers-color-scheme: dark) {
  .van-calendar{
    background-color: #3e3e3e!important;
  }
  .van-calendar__selected-day{
    color: #3e3e3e!important;
    background-color: #8b8a8a!important;
  }
 
  
}
 
这个方法比较简单,直接在日历所在页面的wxss文件中添加就可以。
 
最后效果:
 
vant-weapp Calendar日历组件自定义颜色及暗黑深色模式
 
 
竹子记账

评论 (0)

未连接

暂无评论,快来发表第一条评论吧!