Top Page › Template › カスタマイズ › youth_resp をOSの機能『ダークモード』に対応させるメディアクエリ

youth_resp をOSの機能『ダークモード』に対応させるメディアクエリ

2020-03-07 (Sat) 20:01

拙いテンプレートをご利用の皆様、ご愛顧頂き誠に有難うございます。
youth_resp テンプレートに導入しております「ダークテーマ」を、(浅はかな考えで^^;)OS設定の「ダークモード」にも対応させようという記事です。
CSSは増えてしまいますが、メディアクエリを使って両方できるようにする方法ですので、良し悪しはともかく「こんな方法が有るよ」という『お目汚し程度』でご覧下さい。m(__)m
…記事と関係無いですがご報告まで。本日付のテンプレート更新は、誤字脱字の有ったコメントアウト部分を修正しただけなので、テンプレート本体に変更・更新は有りません。


1) ダークモードとは何?
2) OSの設定がダークモードの場合に表示するCSSメディアクエリ



1) ダークモードとは何?
簡単に言うと、OSレベルで設定可能な画面表示の暗色設定、です。

ダークモードとは何か?各OSの設定方法からiOS/Androidアプリの対応方法まで - Qiita

# はじめに
勉強会をご覧の皆さま
元々のテーマは「10分でわかるダークモード対応」でしたが、あちこち調べているうちにページ数が30を超えてしまい、「**10分ではわからないダークモード対応**」になりました🙇‍♂️
20分には...

↑こちらに詳しく出ておりますのでご覧下さいませ。
ダークモードは新しいOSのみの対応です。旧OSは対応しておりません。(上記サイト参考)
Windows 10 version 1903~
Mac OS Mojave(10.14)~
Android 10~
iOS 13~

ダークモード使ってますか? OS、アプリ別の設定方法がこちらです

これ肩こりも軽減されるかも。スマホやパソコンの見過ぎは目にも体にも良くない!と思いつつ、染み付いた習慣を変えるのはなかなか難しいものがあります。で...

↑OS、アプリ別の設定方法です。
(ダークモードとダークテーマの設定も書いて有ります。)




2) OSの設定がダークモードの場合に表示するCSSメディアクエリ
CSSのメディアクエリ『prefers-color-scheme: dark』を使用するだけで、OSのカラー設定がダークモードの場合にスタイルが適用されます。
[Can I Use] prefers-color-scheme
↑クリックで表示
『prefers-color-scheme: dark』は、新しいPCブラウザのサポートは既に済んでおり、SPブラウザはSafari for iOS, Android Browserなどで機能します。
使い方は、ダークモードで表示して欲しいスタイルを、上記のCSSメディアクエリで挟むだけです。

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

youth_resp テンプレートの『切り替えダークテーマ』と同様に『OSダークモード』で表示したいスタイルをCSS内に(メディアクエリに挟んで)記述します。
ただ、『切り替えダークテーマ』の方は(切り替えるための)クラスが付いており、これをそのまま『OSダークモード』に使う事は出来ないので、クラスを外したものを用意する必要が有ります。また、『OSダークモード』適用中は切り替えボタンをクリックしても淡色になりません。
ボタンの切り替えができなくても、『OSダークモード』を利用している方は暗色での閲覧を希望されている訳ですので、用意するCSSにボタン表示は必要ありません。(故にボタンは非表示にします。)
CSSは増えてしまいますが、この方法で
  • OSダークモード』を設定されている方には『ダークモードCSS』で暗色に。(切り替えボタン無し)
  • 設定されていない方には切り替えボタンで『ダークテーマCSS』で暗色に。
の両方が適います。(^^)

もっと簡単な方法・綺麗で簡素なCSSで実現できるのでしょうが、当方の理解の範疇で出来るのはこの形なので、難しい事はご容赦を。m(__)m
追加するCSSを [Read More] に掲載致しましたので、youth_resp テンプレートをご利用で「使ってみたいな」と思われる方は是非どうぞ♪

youth_resp テンプレートのスタイルシート編集枠一番下に、下記をクリックして展開したCSSを全てコピーして貼り付けて下さい。
CSS自体は『切り替えダークテーマ』と同じものです。(淡色切り替えボタン無し)
トップ画像や色調変更する場合は、youth_resp のカスタマイズ(トップ画像変更)の記事のように、コメントアウトしている個所をご確認の上、該当部分を変更して下さい。
後は【更新】ボタンを押して完了です。
不具合が有った時のために、複製を作っておくことをお勧め致します。m(__)m





最終更新日 : 2020-05-02

Comments

No Subject

素晴らしい。
拍手だけして..と思いましたら、こちらは拍手ボタンを付けてないんですね。
それはそれとして、良いアイデアです。
2020-03-08-09:48

呑兵衛あな http://nonn634.blog.jp/URL [ 返信 ]

aki

Re: 呑兵衛あな 様へ

こんばんは。コメント有難うございます。m(__)m
思い付く事は色々有るのですが、素人なので綺麗にまとめる事が出来ません。
記事も、テンプレートも。^^;
ご興味有りましたら、お付き合い頂ければ幸いです。

p.s. 拍手より一言残して頂きたい…というのが本音です。(^^ゞ
(無理に強いては居りません。)
2020-03-08-20:21

aki https://sorauta1.blog.fc2.com/URL [ 返信 * 編集 ]







非公開コメント