Contents - 目次
prefers-color-schemeとは?
メディアクエリでライトとダークを切り替え。
CSSのメディアクエリで「prefers-color-scheme」を使うと、ライトモードとダークモードを切り替えられる。
ダークモード・ライトモードの切り替えは、スマホの普及によりユーザーの視聴時間が増えたこともあり、OSレベルでは必須的な機能となってきている。
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変数(カスタムプロパティ)が使われていないサイト。
- 他者が作った、不慣れなコードのサイト。
など。
実際にはこのような場合の方が多いと思われる。
なので、工数を確保し、段階的に進めた方が、メンタル的にも作業効率的にも良いはず。
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によるチェックツールや、エディタの拡張機能などでコードを確認すると、どこで何かが起きているが大体わかる。
ブラウザの拡張機能の影響。
ブラウザの拡張機能を使用している場合は、一時的にオフにする。
ブラウザのキャッシュの影響。
キャッシュのクリアや、履歴の削除を行う。
キャッシュのクリアのショートカット例。
Chromeの場合。
- Mac:「command」 + 「shift」 + 「R」
- Win:「Ctrl」 + 「Shift」 + 「R」
閲覧履歴データ削除のショートカット例。
Chromeの場合。
- Mac:「command」 + 「shift」 + 「delete」
- Win:「Ctrl」 + 「Shift」 + 「Delete」
↑のショートカットで削除の画面が出るので、「データを削除」ボタンを押す。
これらで解決しない場合は、頭やパソコンが疲れている可能性があるので、まずは一晩休んで回復させる。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。
CSS 関連メモ。
- first-letterが効かないとき。覚えると便利なCSS擬似要素。
- rgb()で透明度も。CSSの新しい色指定と使い方の例。
- CSSでダークモード。prefers-color-schemeの使い方と効かないとき。
- CSSで縦書き。writing-modeの使い方。効かないときは?
- scroll-snap-typeの使い方。CSSでカルーセル。効かないときは?
- CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ?
- CSS gapの使い方?Flexboxでレスポンシブ?効かないときは?
- CSSの変数と関数。覚えておくと便利なCSSプログラミング。
- CSS aspect-ratioの使い方。効かないときはどうする?
- text-overflowの使い方。CSSで文字数を制御。効かないときは?
- detailsとsummaryの使い方。HTML&CSS or jQueryアコーディオン。
- CSSブレンドモード。mix-blend-modeの例一覧。乗算やスクリーンを。
- counter-incrementの使い方。CSSで連番。増えない時の対処。コピペOK。
- CSS フォントサイズはどうする? remの基本かつ効果的な使い方。
- line-clampの使い方。CSSで複数行指定。効かないときは?
- CSSの@whenと@else。新しいブレイクポイントの設定方法?
- 縁取り文字はCSSのtext-strokeで可能。(非推奨の時代は終わり。)
- CSS変数の使い方例。:rootを使ってカスタムプロパティを覚える。
- CSSでフェードイン。JS不要、コピペ可。ちょっとリッチな雰囲気を。
- CSS カラーコードで透明度を指定したいとき。(16進数6つ+2つで。)
- CSS max-width レスポンシブ対応のピクセル指定は崩れる原因となる。
- CSSのobject-fitの使い方。トリミングやサイズの実装例。
- backgroundの複数指定が効かない時の確認事項。(CSSアニメーションとの組み合わせ。)
- CSS filterで色変更。色相・彩度・明度? filterプロパティでできること。
- CSS position: stickyの使い方。効かない!ときはここをチェック。