数据结构可视化网站-office2003软件

安卓微信变成黑色主题
2023年4月1日发(作者:蜜蜂剪辑)

微信⼩程序⾃适应深⾊主题DarkMode源码

darkmode就是深⾊主题,也称为⿊⾊主题。这个是级别的主题,2020年的时候微信开始⽀持darkmode,随后微信⼩程序也开始适配了

darkmode,在深⾊主题模式下,微信⼩程序会⾃动根据当前主题要做对应的样式适配。这样能给⽤户最好的体验。

简单来讲实现的效果就是如下的动图(点击图⽚查看动图):

微信⼩程序的深⾊/浅⾊⾃动适配需要做的⼯作:

1、⾥⾯添加darkmode的⽀持

相关配置代码如下:

1."darkmode":true,

2."themeLocation":"",

3."window":{

4."backgroundTextStyle":"@backgroundTextStyle",

5."navigationBarBackgroundColor":"@navBackgroundColor",

6."navigationBarTitleText":"天下码农-码农天下",

7."navigationBarTextStyle":"@navTextStyle"

8.},

复制代码

第⼀⾏表⽰本⼩程序⾃动darkmde的适配,第⼆⾏,指定适配⽂件为

window⾥⾯也新增了相关配置为「变量格式」的配置的值,以@开头的为变量

2、新增⽪肤配置⽂件

1⾥⾯⽤的这些变量咱们定义在⾥⾯,下⾯是完整的⽂件:

1.{

2."light":{

3."navBackgroundColor":"#4cb4e7",

4."navTextStyle":"white",

5."backgroundTextStyle":"dark"

6.},

7."dark":{

8."navBackgroundColor":"#000000",

9."navTextStyle":"white",

10."backgroundTextStyle":"light"

11.}

12.}

复制代码

3、每个页⾯进⾏相关的样式适配

⽐如同⼀个类,在浅⾊/深⾊主题下要适配成不⼀样的效果,那么可以在wxss为这个样式写两个不同的样式。以.dark-demo为例

正常的浅⾊模式下的样式

1.

2..dark-demo{

-align:center;

ound-color:#4cb4e7;

g:20rpx;

-radius:20rpx;

:white;

8.}

复制代码

效果如下:

⽽在drakmode下适配如下:

1.@media(prefers-color-scheme:dark){

2..dark-demo{

ound-color:#000000;

:white;

5.}

6.}

复制代码

注意第⼀⾏指定了下⾯样式是在dark主题下才⽣效。这样当⼿机主题为深⾊模式时,dark-demo效果如下:

这样就完成了⾃动适配

相关源码下载(使⽤⽅法,解压后导⼊代码⽚段):

更多推荐

安卓微信变成黑色主题