こんにちは、ちゅらデータのおーすてぃんやいびーん！

概要

iOSのSafariのステータスバーの色を<meta>タグで調整する方法を紹介します。

筆者は、iOS用のPWAを勉強で作っている時に、2022年のSafari仕様でどうやってうステータスバーの色を変えるかを調べていたのですが、情報が古かったり、わかりにくかったりして苦労しました。

なので、わかったことをまとめておきましょうね！

theme-colorでステータスバーの色を変える

以下のように、HTMLの<head>タグに<meta name="theme-color" value="">でiOSのステータスバーを色を設定することができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="Shopping List App">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="blue" >
  <meta name='viewport' content='width=device-width, height=device-height, initial-scale=1.0, user-scalable=no'>
  <link rel="manifest" href="manifest.json">
  <title>Your App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
</body>

</html>

これはどうやら、最近Safariがサポートしてくれるようになったので、まだあちこーこーです。AndroidのChrome、Firefoxなどもこのタグがわかるので、楽になりました。

外観モード対応

iOSにはダークモード、ライトモードの外観モードがあり、明るめのtheme-colorをダークモードで使うと、不恰好なので、以下のように、mediaのAttributeを追加して、cssのmediaクエリと同じ書き方をします。

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="Shopping List App">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#555555" media="(prefers-color-scheme: dark)">
  <meta name="theme-color" content="#848484">
  <meta name='viewport' content='width=device-width, height=device-height, initial-scale=1.0, user-scalable=no'>
  <link rel="manifest" href="manifest.json">
  <title>Your App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
</body>
</html>

iOSは上から<meta>を見て、当てはまるtheme-colorが見つかるまで順番に下の最後の<meta>まで見ていくようなので、ライトモードにもmediaのAttributeを追加しましょう。
また、mediaのないものも追加しておくのもいいのかもしれません。