アプリのテーマと背景色をカスタマイズする

background_color マニフェストメンバーは、アプリのスタイルシートが読み込まれる前にアプリケーションウィンドウに表示される色を定義します。

この色はスタイルシートが読み込まれる前に表示されるため、その値をアプリケーションのスタイルシート内の background-color プロパティと同じ色値に設定してください。これにより、ウェブアプリケーションの起動とコンテンツの読み込みの間でスムーズな視覚的な移行が確保されます。

値は有効な CSS の <color> です。このウェブアプリのマニフェストファイルの例では、アプリケーションの背景色は名前付き色である peachpuff に設定されています。

{
  "name": "My app",
  "start_url": "/",
  "icons": [
    {
      "src": "icon.webp",
      "sizes": "256x256",
      "type": "image/webp"
    }
  ],
  "display": "standalone",
  "background_color": "peachpuff"
}

このアプリケーションは、 body 要素の背景色に同じ色を適用するスタイルシートも読み込みます。

body {
  background-color: peachpuff;
}

次のスクリーンショットは、上記のコードが動作している様子を示しています。このコードを使用する PWA は Windows にインストールされており、スクリーンショットはアプリの内容が読み込まれる前のアプリケーションウィンドウの表示状態を示しています。

PWA マニフェスト内の theme_color メンバーは、アプリケーション内で使用されるオペレーティングシステムとブラウザーの UI 要素の既定の色を定義します。

端末、オペレーティングシステム、ブラウザーが異なると、theme_color メンバーが適用される方法も代わります。

• モバイル端末では、テーマカラーがステータスバーに適用されます。
• デスクトップオペレーティングシステムでは、テーマカラーはスタンドアロンアプリウィンドウのタイトルバーをカスタマイズするために使用されます。

theme_color は、 PWA の全体的なデザインとブランドイメージに調和し、さまざまな端末やプラットフォームで一貫したユーザー体験を提供できるように、適切に選択してください。

background_color と同様に、任意の <color> 値が有効です。このウェブアプリマニフェストファイルの例では、 theme_color は rgb(255 218 185) に設定されており、これは peachpuff の RGB 相当値です。

{
  "name": "My app",
  "start_url": "/",
  "icons": [
    {
      "src": "icon.webp",
      "sizes": "48x48",
      "type": "image/webp"
    }
  ],
  "display": "standalone",
  "background_color": "peachpuff",
  "theme_color": "rgb(255 218 185)"
}

次のスクリーンショットは、アプリが Windows にインストールされた際に上記のコードが動作する様子です。この際、 theme_color マニフェストメンバーがタイトルバーの色として使用されています。

theme-color 属性値は、 name 属性を持つ <meta> 要素を使用して、各ウェブページごとのテーマカラーを定義できます。これは、アプリ全体で一度だけグローバルに定義するtheme_color マニフェストメンバーとは異なります。

両方が設定されている場合、theme-color メタ要素の値が theme_color マニフェストメンバーの値を上書きします。これにより、アプリ全体でグローバルな色を定義し、特定のページで上書きすることが可能です。

一部のブラウザー、たとえば macOS の Safari や Android の Chrome などでは、 theme-color メタ要素の値がブラウザーの UI のスタイル設定にも使用されます。

• ウェブアプリマニフェスト
• Meta Theme Color and Trickery on css-tricks.com (2021)
• Recommended fields on web.dev