『Windows 10』に『macOS Mojave』や『iOS 13』と、各OSが『ダークモード』の対応を行ってきていますが皆さんは使われていますか?

ダークモード

皆さん、こんにちは。

業務改善を行うIT・業務コンサルタント、高橋です。

最近流行り?の『ダークモード』、これに批判的な方もいるようですが個人的には気に入っています。

単純な話で、少しでも目の負担を軽減したい、見やすくしたいということからです。

(私はブルーライト軽減のために昼間でもiPhoneは『ナイトシフト』を使っています。)

しかし、ベースとなるOSや一部のアプリケーションはそれに対応しているものの、Webサイトに関してはほとんど対応していないように思えます。

今日はそんな『ダークモード』の話題です。

Webサイトをダークモードに対応させる

Webサイトを『ダークモード』に対応させるためには『prefers-color-scheme』というものを使います。

この『prefers-color-scheme』を使って『ダーク(黒)』の場合の条件をCSSに記述すれば対応できます。

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

といった感じです。

変更箇所が複数に渡る場合は『var(–変数)』で対応すると便利です。

:root {
–main-bg: #fff;
–main-text: #333;
}
@media (prefers-color-scheme: dark) {
:root {
–main-bg: #000;
–main-text: #fff;
}
}

body {
background-color: var(–main-bg);
color: var(–main-text);
}

といった感じです。

さて、どれくらいのWebサイトが『ダークモード』に対応していくのでしょうか...

Ads

この記事を書いた人

  • 業務コンサルタント高橋晋吾
  • 1968年生 愛知県名古屋市出身 会計・給与・販売購買在庫・税金系などの業務システムを製造・販売する某上場企業の出身で、会計・IT・WEBを中心とした業務改善などを行う業務コンサルタント
  • 中小企業庁『ミラサポ』登録専門家/あいち産業振興機構登録専門家/名古屋産業振興公社登録専門家
  • (Publisher:TRILOGYFORCE.COM)

この記事をシェアする

  • Facebookにシェア
  • はてなブックマークにシェア
  • LINEにシェア

関連記事

お問い合わせ

お悩み・問題・課題を今すぐご相談ください。お問い合わせはこちら

ページのトップへ戻る