最新のWebブラウザーのほとんどは、ダークモードまたはライトモードでWebサイトを実行する機能をサポートしています。 Blocs 作成するサイトにダークテーマとライトテーマのサポートを追加するプロセスを支援するように設計された、さまざまな組み込み機能があります。
機能
時 Blocs サイトは、OSをダークモードで実行しているデバイスで表示されます。 暗いテーマ ページのbodyタグに追加されます。 これは、特にダークモードで、クラスを使用して要素のスタイルを簡単に設定できるので便利です。
たとえば、クラスが適用されたボタンがある場合 .my-ボタン、ダークモードでボタンの外観を変えるには、を使用して新しいクラスを追加するだけです。 クラスマネージャー 名前をつけて .ダークテーマ .my-ボタン。 クラスのこの特別なバリエーションに追加されたスタイリング値は、ダークモードで実行されているデバイスでサイトが表示されている場合にのみ有効になります。
ダークテーマクラス
クラスのダークテーマバージョンを作成するには、クラスを右クリックするだけです。 クラスマネージャー コンテキストメニューから選択します ダークテーマバージョンを作成する。 これにより、正しい名前のクラスが作成されるため、そのスタイリング値は、サイトがダークモードで表示されている場合にのみ有効になります。
ダークモードのプレビュー
サイトのダークテーマのスタイルをプレビューする場合は、にあるダークサイトモードオプションを使用してOSダークモードをシミュレートできます。 キャンバス設定.
ダークサイトモードのキャンバスオプションは、メインのデザインキャンバスだけでなくアプリ内プレビューモードにも影響することに注意してください。
簡単な例
以下は、の背景色を設定するプロセスをカバーする簡単な例です。 Bloc 特にダークモードの場合は、この投稿に記載されているすべての手法を使用します。
