【有偿提问】uniapp x 暗色主题切换问题

分类：uni-app x

uniapp x

使用 uni.setAppTheme(options) 和 theme.json 已经实现状态栏暗色模式切换。
请问自己写的布局css 如何进行切换？
prefers-color-scheme 也不行
css变量也不能用
请教一个实例或者最优方案
160
最优方案优先感谢提供

2024-08-23 15:44 负责人:无分享

2 个回复

1***@qq.com

说一下我的笨方法：每个组件对应一组css(暗黑、明亮)；组件最外层class根据当前模式区分；
文档好像有获取与监听模式的API

具体参考图示代码：

m***@88.com (作者)

你这个是uniapp x嘛？怎么能使用vh 我的不行

2024-08-23 16:18
1***@qq.com

回复 m***@88.com: 不好意思我是uniapp；但方法可以参考下

2024-08-23 16:21
m***@88.com (作者)

回复 1***@qq.com: 没事的感谢你的回复，我的目前的方案也是使用 class 绑定加上变量。但是这个很繁琐，组件太多，后期很难维护。如果能像uniapp 媒体查询类似的方案就很方便了。写在一个地方只需要修改变量即可

2024-08-23 16:29

rice_z

可以使用uts，分别定义一组暗黑、明亮的颜色值，然后通过绑定style的样式设置颜色值;

//伪代码  
let obj={  
 light:{  
  bgcolor:"#fff"  
 },  
 dark:{  
  bgcolor:"#333"  
 }  
}  

const theme='dark'  

<view :style="{backgroundColor:obj[theme].bgcolor}"></view>

m***@88.com (作者)

谢谢你，暂时没有其他的，发给我支付宝我给你兑现。

2024-08-25 00:50
rice_z

回复 m***@88.com: 哇，真的嘛，感谢，支付宝是 18267591695,（刘）

2024-08-26 10:23

要回复问题请先登录或注册

【有偿提问】uniapp x 暗色主题切换问题

2 个回复

公告

相关问题

【有偿提问】uniapp x 暗色主题切换问题

与内容相关的链接

2 个回复

公告

相关问题