ソフトウェア開発|ダークカラーパターンのためのシンプルなCSSトリック

ユーザーの選択したテーマに合わせてサイトを調整できる機能は、素晴らしい二次機能です。

おそらく、すでにお馴染みでしょう。widthプロパティとheightプロパティには、ビューポートの寸法が含まれています。CSSを使用して、異なる寸法で異なるレイアウトをレンダリングすることができます。

同じように動作します。ユーザーはオペレーティングシステムで明るいテーマか暗いテーマを使うように設定できます。prefers-color-scheme この値を含みます。W3Cの仕様では、セピアのような将来の値をサポートする可能性があるとしていますが、値は明るいか暗いかのどちらかです。

prefers-color-scheme メディアクエリ

prefers-color-scheme 2つのバリエーションがあります。

/* Light mode */
@media (prefers-color-scheme: light) {
 :root {
 --body-bg: #FFFFFF;
 --body-color: #;
/* Dark mode */
@media (prefers-color-scheme: dark) {
 :root {
 --body-bg: #;
 --body-color: #FFFFFF;

上のCSSで、-body-bgと-body-colorは prefers-color-scheme メディアクエリです。ご覧のように、これらは両方のモードで異なる値を含んでいます。明るいテーマでは、背景を白、テキストを黒に設定しています。ダークテーマでは、背景を黒、テキストを白に設定しています。

CSS、W3Cは将来的に値を導入する可能性があるとされているため、このCSSをデフォルト値に変換することは理にかなっています。

/* Light mode */
 :root {
 --body-bg: #FFFFFF;
 --body-color: #;
/* Dark mode */
@media (prefers-color-scheme: dark) {
 :root {
 --body-bg: #;
 --body-color: #FFFFFF;

上のコードでは、デフォルトでライトテーマを定義し、メディアクエリがダークテーマの場合はダークテーマに変換しています。こうすることで、今後メディアクエリに追加される値は、デフォルトでライトテーマに設定されます。

CSS変数の使用

テーマごとに異なる値を設定したので、実際にそれを使ってページをデザインする必要があります。

 background: var(--body-bg);
 color: var(--body-color);

仕様 、CSSが変数を使用する方法です。上のコードでは、backgroundを-body-bgの値に、colorを-body-colorの値に設定しています。これらの変数の値は、メディアクエリから来ていることに注目してください。つまり、背景と前景の色はオペレーティング・システムの設定によって変わるということです！

これがメディアクエリの真の力です。オペレーティングシステムからウェブまで、一貫したユーザーエクスペリエンスを提供します。

var()アクセスし、OSのテーマを切り替えると、あるテーマから別のテーマへの移行が表示されます。

CSSワーキンググループの ウェブサイトも同じメディアクエリを使用しています。OSのテーマを変更すると、サイトがテーマを切り替えて調整します。

はんけつをくだす

prefers-color-scheme 、通常のプログラミング言語と変わらないことに注意してください。あるロジックに従って値が変化する変数を定義します。そして、これらの変数はさらなる操作に使われます。

ユーザーの選択したテーマに合わせてサイトを調整できる機能は、素晴らしい二次機能です。また、ユーザーにとっては、デスクトップとウェブの境界線をさらに曖昧にすることができます。最新のブラウザは いるので、今すぐ実験を始めることができます。

ハッピーコーディング。

本記事は許可を得て再掲載しています。