Webサイトをダークモードに対応させると、次に気になってくるのがスマートフォンのブラウザで見た時のステータスバーの背景色です。私はiPhoneを使っているので主にiOS版Safariの話になるんですが、他のサイトを見た時に、ダークモードだろうがライトモードだろうが常にステータスバーの背景色が固定されているサイトをいくつか発見しました。これは一体どうやって実装しているのかなと思って調べてみたところ、とても簡単な方法だったので共有したいと思います。

どんな状況か

まずは私のブログをiPhoneのSafariで閲覧した際のスクリーンショットでご説明したいと思います。

OS:ライトモード/サイト:ライトモード

OSの設定がライトモード、サイトでの指定がライトモードの場合です。以下同じ。

このパターンは特に問題ありません。

OS:ライトモード/サイト:ダークモード

最初の問題点はこれですね。サイトはダークモードで黒なのにステータスバーはOSの設定がライトモードなので白です。少し見栄えが悪いように思います。

OS:ダークモード/サイト:ライトモード

これも特に問題はないかと思います。

OS:ダークモード/サイト:ダークモード

そして2つめの問題点です。ダークモードで表示したいのにステータスバーは白いまま。

ではどうするか

私が思うにダークモードで表示したい時には画面上の背景全てが黒、という状態が一番見栄えが良いのではないかと思います。あくまで個人的な感想ですが。

ということでステータスバーの背景色を指定する方法を調べてみると、

<meta name="theme-color" content="#242628">

meta要素のname属性にtheme-colorを指定し、content属性に指定したいカラーコードを指定します。私の場合、ダークモード時の背景色が#242628なのでこれを指定します。そうすると、OSの設定やユーザーの指定がダークモードであろうがライトモードであろうが常にステータスバーの背景色が#242628に固定されるようになります。それではスクリーンショットで検証してみましょう。

OS:ライトモード/サイト:ライトモード

meta要素で指定した通り、ステータスバーは#242628が背景色として表示されます。まぁこれはこれで違和感がなきにしもあらずですが…

OS:ライトモード/サイト:ダークモード

ダークモード時のサイトの背景色とステータスバーの背景色が一致してて良い感じです。

OS:ダークモード/サイト:ライトモード

ライトモードの時と違って画面下部もダークモード仕様になっていますので、画面の上下が黒で引き締まった印象になります。いいですね。

OS:ダークモード/サイト:ダークモード

全部真っ黒になりました。OSの設定をダークモードにしている場合、サイトもダークモードで見ることが多いと思いますので、これがベストだと感じます。

最後に

ちょっと細かいところのお話でしたが、同じように悩んでいる方の助けになれば幸いです。私自身も結構悩んでたんですが調べてみるとあっさり解決しました。通常サイト全体の背景色はbody要素に指定しますが、ステータスバーまで同じ色にするにはhtml要素に指定するのかなとか色々と検証してみましたが、意外にもHTMLで色指定ができるとは考えもしませんでした。

参考サイト

TAKLOG

TAKLOG（読み方：たくろぐ）は、フロントエンド開発やWeb制作分野のことを中心に、備忘録や知識のアウトプットの場として運営しているブログです。

https://www.tak-dcxi.com/

kojika17

1年に1回は更新するブログ

https://kojika17.com/