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

Deeplからの自動翻訳

ダークモードは、最近、多くの支持を集めています。そのため、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クラスを割り当てています。

blank

ステップ2

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

blank

フォームオブジェクトは自動的に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;
	}
}

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

blank

次は何をしましょうか?

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

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

Vanessa Talbot
- プロダクトオーナー - Vanessa Talbotは、2014年6月に4Dプログラムチームに参加しました。プロダクトオーナーとして、彼女はユーザーストーリー(ユーザーが期待する新機能とその使用法)を書き、それを具体的な機能仕様に変換する役割を担っています。また彼女の役割は、実装された機能が顧客のニーズを満たしているかどうかを確認することでもあります。入社以来、4Dにおける主要機能の定義に関わってきました。プリエンプティブ/マルチスレッドの新機能の大部分と、非常に複雑なテーマである組み込みアプリケーションの新アーキテクチャに取り組んできました。VanessaはTelecom Saint-Etienneで学位を取得後、Criminal Research Institute でオーディオビジュアル部門の開発者としてキャリアをスタートさせました。また、メディアや医療の分野でも、技術サポートやプロダクションの分野で働いてきました。