【ダークモード】 このブログ、何色に見えていますか?

「UIUI design」はダークモードに対応しています。
ダークモード設定をONにしている方は、背景が黒系になっていると思います。

ということで、今日の内容は「本ブログのダークモード対応」について。

ダークモードって何?

最近良く目にするダークモード。AppleやGoogleが対応を推奨しており、昨今のアプリやWebサイトでも実装されているものが多いですよね。

しかし、機能自体は最近のもので、スマートフォンではiOS13(2019年9月19日リリース)、Android 10(2019年9月4日リリース)の新機能としてOSに搭載されたばかりです。

また、「ダークモード」はAppleでの名称で、Googleでは「ダークテーマ」と呼んでいます。(Apple信者のため、本ブログではダークモードで統一します笑)

なぜダークモードが推奨されているのか。

「目の負担が軽減される」や「バッテリー節約になる」などいくつか理由があるそうですが、私は「使用環境の変化」だと思います。

モバイルの特性と使用環境の変化

近年まで、Webコンテンツとユーザーの接点はデスクトップがメインでした。デスクトップを使う環境というと、一般的に屋内で使用しますよね。その場所は暗いですか?

当然十分な照明もあり、画面が明るくても気にならないのではないでしょうか。

それが現在はどうでしょう? Webコンテンツを閲覧する端末の約8割はスマートフォンという時代です。

そしてスマートフォンは場所を選びません。明るい部屋の中、薄暗い寝室、時には夜の屋外というシチュエーションもあります。
眩しいから「見るのやーめた」ではコンテンツホルダーにとって良いとは言えないでしょう。

「見やすくしたから、いつでもどこでも、これからも使ってね」

というのが本音なんじゃないかな、と思っています。

とは言いつつ、自分もダークモードは見やすいのでMac、iPhoneは常にダークモードですが(笑)

ダークモード、実装してみた

前置きが長くなってしまいました。
本ブログのダークモードは、メディアクエリの「prefers-color-scheme」と「CSS カスタムプロパティ (変数)」で実装しています。

先に話しておきますが、「CSS カスタムプロパティ(変数)」はIE 11非対応です。実装としてここは悩みましたが、本ブログのポリシーとして新しいものを積極的に使いたいので、そのようにしました。

ちなみにSCSSを使うと

これはSCSSの仕組み上当然の話しなんですが、SCSSはあくまでもコンパイラです。

つまり、変数や便利なパッケージなどありますが、結局は静的なCSSを書き出すということです。
ダークモード用のCSSを書く場合、数値(カラーなど)を「prefers-color-scheme」で上書きしているに過ぎません。

$color:#fff; /* 変数に背景色をセット */

body{
  background-color:$color;
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  body{
    background-color:#222;
  }
}

/* ----- ↓コンパイルする ----- */

body {
  background-color: #fff;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
  }
}

という感じで、bodybackground-colorを2回書かなくてはなりません。
また、せっかく背景色を変数$colorに入れているのに、それも上手く活かしきれていません。(@media (prefers-color-scheme: dark)内でも変数を使用したい場合はスコープ内で上書きしなければなりません)

これじゃあダークモードに関してSCSSを使うメリットがないなあと思いました。

CSS カスタムプロパティを使ってみた

そこで、CSS カスタムプロパティ(変数)を使ってみました。
CSS変数はコンパイルの必要がありません。そのままブラウザが読み込みます。
なのでこのような書き方ができるのです。

/* 通常時に読み込む変数 */
:root{
  --color:#fff;
}

/* ダークモード時に読み込む変数 */
@media (prefers-color-scheme: dark) {
  :root{
    --color:#222;
  }
}

body{
  background-color:var(--color);
}

どうでしょう。わかりやすいし、コード量の削減にも繋がりますよね。
いまのところ、ダークモード対応ではこの方法が一番スマートかなと思います。
ただし、対応ブラウザ問題を除いてですが…。

以上、本ブログのダークモード対応はこんな感じです!

最新記事