こんにちは、ちゅらデータのおーすてぃんやいびーん！
概要
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のないものも追加しておくのもいいのかもしれません。