CSS Media QueryによるUIの明暗の指定

ダークモードは、最近、多くの支持を集めています。そのため、4D v19でサポートを追加し、関連するお知らせでニーズに合わせて調整できるいくつかの方法について触れました。

このブログ記事では、CSSに焦点を当て、CSSメディアクエリを使用してライトモードとダークモードにCSSスタイルを設定する方法について詳しく説明します。

メディアクエリとは？

CSSでは、メディアクエリは、特定の特性によってアプリケーションの外観を変更したい場合に便利です。4Dはprefers-color-schemeメディア機能をサポートしているので、ライトモードとダークモードでのダイアログの振る舞いを定義することができます。

デモの時間

例を見てみましょう。連絡先アプリケーションで、ライトアピアランスは、macOSでは、以下のようになります。

ステップ 1

このアプリケーションのデザインを変更するために、私たちは選びました。

• テキストとラインの4色
• 背景色：3色

これらの色は、”styleSheets.css “というCSSファイルで定義しました。その内容は次のとおりです。

	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}

各色には、”accentColorX” または “accentBackColorX” という名前の対応するクラスがあります。

そして、プロパティ・リストの中で、各フォーム・オブジェクトにCSSクラスを割り当てています。

ステップ2

macOSのダークモードをONにする。その結果がこちら。

フォームオブジェクトは自動的にDark Modeに切り替わりました。しかし、Name ラベルの色は暗い背景と相性が悪く、ライトグレーのフレームもうまく収まりません。

カラーセットを変更する必要があります。何度かテストして、ようやく4色の文字色と3色の背景色が揃いました。

ステップ3

次に、これらの色を定義します。

• インターフェイスがライトモードの場合、4D は特定のカラーセットを使用します。
• インターフェイスがダークモードの場合、4D は別の色を使用します。

メディアクエリは、フォームに条件付きでスタイルを適用する必要がある場合に便利です。ライトテーマのCSSクラスをlightに設定したメディアクエリでラップし、ダークテーマのCSSクラスをdarkに設定したメディアクエリでラップすることができます。

@media (prefers-color-scheme: light){
	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}
}

@media (prefers-color-scheme: dark){
	.accentColor1 {
		stroke: #A1BFFC;
	}

	.accentColor2 {
		stroke: #4C4C4D;
	}

	.accentColor3 {
		stroke: #4D4D4D;
	}

	.accentColor4 {
		stroke: #46484A
	}

	.accentBackColor1 {
		fill: #7F7E7F;
	}

	.accentBackColor2 {
		fill: #444444;
	}

	.accentBackColor3 {
		fill: #CBCACB;
	}
}

そして、このような結果が得られます。

次は何をしましょうか？

4DでCSSのヘルプが必要な場合は、このブログ記事を読むか、30分の4D Summitのビデオを見ることをお勧めします。

また、4D フォーラムで議論に参加することもできます。