WeChat 미니 프로그램 다크 모드

1. 다크 모드를 켜세요

app.jsonapp.json 中配置 "darkmode": true

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

2、配置主题文件

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

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

theme.json 配置文件一共分为两个属性，light 和 dark，分别正常模式和暗黑模式。

theme.json 示例如下（仅供参考）：

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

必须存在 light 和 dark 两个属性，里层命名自定义，没有严格要求。

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;
  }
}

에서 "darkmode": true를 구성하세요. 2. 테마 파일을 구성하세요

새 테마 구성을 만드세요. 루트 디렉터리 theme.json에 파일을 저장하고

rrreee

theme.json을 가져오도록 app.json에 경로를 구성합니다. 구성 파일은 다음과 같습니다. 밝음 및 어두움, 즉 일반 모드와 어두운 모드의 두 가지 속성으로 나뉩니다.

theme.json 예시는 다음과 같습니다(참고용):

rrreee

light 및 dark 두 가지 속성이 있어야 하며, 내부 레이어의 이름은 정의에 따라 지정되며 엄격한 요구 사항은 없습니다. 3. app.json에 구성 속성을 적용합니다.

🎜 theme.json의 사용자 정의 이름을 @로 시작하는 구성 속성에 연결합니다. 구성, 예는 다음과 같습니다 🎜rrreee🎜구성이 완료된 후 휴대폰이 다크 모드(다크 모드)를 켠 후 구성한 색상에 따라 애플릿이 변환됩니다. 🎜🎜4. 다크 모드에 대한 wxss 스타일 적응 🎜🎜wxss는 미디어 쿼리 prefers-color-scheme을 통해 다양한 테마에 대한 적응을 지원합니다. 🎜🎜다음 스타일은 페이지 배경을 일반 모드에서는 회색-흰색으로, 어두운 모드에서는 검정색으로 만듭니다. 🎜rrreee🎜5. 렌더링 🎜🎜🎜🎜🎜추천 튜토리얼: "🎜WeChat 미니 프로그램🎜"🎜

위 내용은 WeChat 미니 프로그램 다크 모드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!