CSSでダークモード。prefers-color-schemeの使い方と効かないとき。デザイナー、コーチ、ディレクター / 井川

.

Memo

です・ます調の文章でなくすみません。

当初の名残りです..pets

メディアクエリでダークモード。prefers-color-schemeの使い方と効かないとき。

prefers-color-schemeとは?

メディアクエリでライトとダークを切り替え。

CSSのメディアクエリで「prefers-color-scheme」を使うと、ライトモードとダークモードを切り替えられる。

ダークモード・ライトモードの切り替えは、スマホの普及によりユーザーの視聴時間が増えたこともあり、OSレベルでは必須的な機能となってきている。

CSSでダークモード。prefers-color-schemeの使い方と効かないとき。


prefers-color-schemeの使い方。

prefers-color-schemeの基本的な概念。

もっともシンプルに切り替える場合は、以下のような書き方でダークモードにできる。

ダークモードの例)

これで、OSがダークモードになっていれば、ブラウザもダークモード化される。

CSS
@media (prefers-color-scheme: dark) {
body {
 background-color: #333;
 color: #fff;
 }
}
ライトモードの例)

ライトモードの場合は、背景色と文字色の白と黒を入れ替え、次のような記述となる。

CSS
@media (prefers-color-scheme: light) {
body {
 background-color: #fff;
 color: #333;
 }
}
ダークモードの例(複数要素に指定。)

色は、CSS変数(カスタムプロパティ)で指定するとあとあと便利。

セレクタでまとめ、複数箇所の色を一度に変更できる。

CSS
@media (prefers-color-scheme: dark) {
:root {
 --dark_color: #333;
 --light_color: #fff;
}
body,
article h2,
aside h3 {
 background-color: var(--dark_color);
 color: var(--light_color);
 }
}

ダークモードとライトモードの切り替え。

darkとlightの切り替え。

ダークモードとライトモードの切り替えボタンを実装する場合は、CSSだけでは難しく、JavaScriptが必要となる。

ダークモードにするときは、OSごと(デバイスごと)ダークモード・ダークテーマにするか、プラグインを利用していることも多いと思われるため、ブラウザへのボタンの設置については今回割愛。)

prefers-color-schemeの注意点。

新規サイトはともかく、既存サイトにダークモード用にprefers-color-schemeを実装する場合は、手間がかかる可能性が高い。

例えば下記のようなサイトの場合、ハードルが上がる。

  • 色やデザインに凝っているサイト。
  • 色の管理に、CSS変数(カスタムプロパティ)が使われていないサイト。
  • 他者が作った、不慣れなコードのサイト。
  • など。

実際にはこのような場合の方が多いと思われる。

なので、工数を確保し、段階的に進めた方が、メンタル的にも作業効率的にも良いはず。

prefers-color-schemeでダークとライトを切り替え。

MDNのコード例。

prefers-color-schemeについてのMDNのコードの例では、以下のようになっている。

色の管理はCSS変数(カスタムプロパティ)を使用した方が楽になる。)

CSS
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

参照元:prefers-color-scheme – CSS: カスケーディングスタイルシート | MDN


prefers-color-schemeが効かないとき。

prefers-color-schemeの設定の問題。

CSSファイルのprefers-color-schemeの設定の問題による原因が想定される。

prefers-color-schemeの記述場所。

「:root」でCSS変数(カスタムプロパティ)を指定する場合、「@media (prefers-color-scheme: dark)」をその下に記述するとうまく機能されないことがある。

!importの有無。

!importを付けなければ値が上書きされないことがある。

括弧のつけ忘れ、コロンとセミコロン、スペルミスなど。

ほか、W3Cによるチェックツールや、エディタの拡張機能などでコードを確認すると、どこで何かが起きているが大体わかる。

参考:W3C CSS 検証サービス

ブラウザの拡張機能の影響。

ブラウザの拡張機能を使用している場合は、一時的にオフにする。

ブラウザのキャッシュの影響。

キャッシュのクリアや、履歴の削除を行う。

キャッシュのクリアのショートカット例。

Chromeの場合。

  • Mac:「command」 + 「shift」 + 「R」
  • Win:「Ctrl」 + 「Shift」 + 「R」
閲覧履歴データ削除のショートカット例。

Chromeの場合。

  • Mac:「command」 + 「shift」 + 「delete」
  • Win:「Ctrl」 + 「Shift」 + 「Delete」
  • ↑のショートカットで削除の画面が出るので、「データを削除」ボタンを押す。

これらで解決しない場合は、頭やパソコンが疲れている可能性があるので、まずは一晩休んで回復させる。

CSSでダークモード。prefers-color-schemeの使い方と効かないとき。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。