hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 小程序 - 正文 君子好学,自强不息!

微信小程序 暗黑形式_微信小程序

2020-07-05小程序ki4网15°c
A+ A-

1、开启暗黑形式

app.json 中设置 "darkmode": true

// app.json
{
    ...
    "darkmode": true
}

2、设置主题文件

在根目录新建主题设置文件 theme.json, 并在 app.json 中设置途径引入

// app.json
{
    ...
    "themeLocation": "theme.json"
}

theme.json 设置文件一共分为两个属性,lightdark,离别一般形式和暗黑形式。

theme.json 示例以下(仅供参考):

// theme.json
{
  "light": {
    "navBackgroundColor": "#ffffff",
    "navTextStyle": "black"
  },
  "dark": {
    "navBackgroundColor": "#000000",
    "navTextStyle": "white"
  }
}

必需存在 lightdark 两个属性,里层定名自定义,没有严格要求。

3、在 app.json 中运用设置属性

在设置属性以 @ 开头拼接 theme.json 中自定义的名字写入设置,示例以下

// app.json
{
  ...
  "window": {
    "navigationBarBackgroundColor": "@navBackgroundColor",
    "navigationBarTitleText": "小书包大妄想",
    "navigationBarTextStyle": "@navTextStyle"
  },
  "darkmode": true,
  "themeLocation": "theme.json"
}

设置完些,接着手机开启暗黑形式(深色形式)后,小程序会依据你设置的色彩举行转换。

4、wxss款式适配暗黑形式

wxss 中,支撑经由过程媒体查询 prefers-color-scheme 适配差别主题。

以下款式会在一般形式下页面背景为灰白色,暗黑形式下为黑色。

/* 一般形式下运用的款式 */
page{
    background: #f1f1f1;
}
 
 
/* 暗黑形式下运用的款式 */
@media (prefers-color-scheme: dark) {
  page{
    background: #000000;
  }
}

5、效果图

引荐教程:《微信小程序》

以上就是微信小程序 暗黑形式的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
微信小程序 暗黑形式_微信小程序

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>