9/20にアップデートされたiOS13からiPhoneでも、他のOSから遅ればせながらダークモードが使えるようになりました。

ダークモード対応ができるのはネイティブアプリだけかと思っていましたが、Webサイトも対応できるようですね。せっかくSafariやChromeなどのブラウザアプリがダークモードに対応していても、肝心のWebサイトが対応していないと枠だけ暗く、中身は明るいままとちぐはぐな印象なので、当Blogも早速対応してみました。

ライトモード

まずは、Before。ライトモードでの表示も従来と同様、白地に黒文字がベースです。

ダークモード

お次に、ダークモード。黒地に白文字ベースにしてみました。ダークモードの色合いはとくに規格で決まっているわけではないので、適当に決めました。夜に寝ながら見る場合に少しは目に優しくなったでしょうか？（笑）

対応した箇所

当BlogサイトはWordPressのTwentyFourteenベースの子テーマを利用しています。子テーマのstyle.cssの最後尾に以下の記述（@media (prefers-color-scheme: dark) { … }）を追記します。OSがダークモードの時に、この記述内のスタイルが適用されます。iOSのSafariと、macOSのSafari, Chrome, FireFoxでは動作することを確認しました。

style.css

.
.
.

@media (prefers-color-scheme: dark) {
/* ダークモード */

body,div,p {
color:#dddddd;
background:#000000;
}

hr {
border: 1px solid #ffffff;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
    background:#000000;
}

.comments-area textarea {
color:#EEEEEE;
background:#444444;
}
.comments-area .comment-form-author input {
color:#EEEEEE;
background:#444444;
}
.comments-area .comment-form-email input {
color:#EEEEEE;
background:#444444;
}
.comments-area .comment-form-url input {
color:#EEEEEE;
background:#444444;
}

.entry-content pre {
  background-color: #222222;
}

.entry-content p {
  color: #cccccc;
}

.site-content a {
   color: #ffffff;
}
.site-content a:hover {
   color: #4444ff;
}
.entry-content table {
  border-collapse: collapse;
}
.entry-content th,td {
border: 1px solid #444444;
}

.entry-content a {
        color: #8888ff;
}

.entry-content a:hover {
        color: #4444ff;
        text-decoration: none;
}

.entry-content .rpwe-block a{
   color: #ffffff;
}
.entry-content .rpwe-block a:hover{
   color: #8888ff;
}

::selection {
        background: #8888ff;
}
::-moz-selection {
        background: #8888ff;
}

.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
        background: #8888ff;
}
.paging-navigation .page-numbers.current {
        border-top: 5px solid #8888ff;
}
}

どこを変えたらどこの色が変わるかというのは個々のサイトによって全く異なります。かなり泥臭く、トライアンドエラーを繰り返す必要があると思います。ブラウザの開発者ツールを使用して、地道に要素を拾っていきましょう。

というわけで、恐れ入りますが、ここの色がどうしても黒にならないんだけど・・・みたいな個別のご質問には残念ながらお答えすることができませんので、あしからずご容赦ください。（私も丸半日くらいは平気で費やしていますので、意外と面倒で、多少の根気が必要かとおもいます 汗）