WeChat ミニ プログラム ダーク モード

1. ダーク モードをオンにする

app.json で "darkmode": true

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

を構成します2. テーマ ファイルを構成します

ルート ディレクトリに新しいテーマ構成ファイル theme.json を作成し、app.json に

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

## をインポートするパスを構成します。 #theme.json 構成ファイルは、light と dark の 2 つの属性に分割されており、それぞれノーマル モードとダーク モードです。

theme.json 例は次のとおりです (参考のみ):

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

は

light と dark が存在する必要があります2 つの属性の場合、内部層の名前付けはカスタマイズされ、厳密な要件はありません。

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. レンダリング

推奨チュートリアル: 「

WeChat ミニ プログラム」

以上がWeChat ミニ プログラム ダーク モードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。