ダークモードは、最近、多くの支持を集めています。そのため、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のビデオを見ることをお勧めします。