暗いテーマ

最新のWebブラウザーのほとんどは、ダークモードまたはライトモードでWebサイトを実行する機能をサポートしています。 Blocs 作成するサイトにダークテーマとライトテーマのサポートを追加するプロセスを支援するように設計された、さまざまな組み込み機能があります。

使い方

時 Blocs サイトは、OSをダークモードで実行しているデバイスで表示されます。 暗いテーマ ページのbodyタグに追加されます。 これは、特にダークモードで、クラスを使用して要素のスタイルを簡単に設定できるので便利です。

たとえば、クラスが適用されたボタンがある場合 .my-button、ダークモードでボタンの外観を変えるには、を使用して新しいクラスを追加するだけです。 クラスマネージャー 名前をつけて .dark-theme .my-button。 クラスのこの特別なバリエーションに追加されたスタイリング値は、ダークモードで実行されているデバイスでサイトが表示されている場合にのみ有効になります。

ダークテーマクラス

クラスのダークテーマバージョンを作成するには、クラスを右クリックするだけです。 クラスマネージャー コンテキストメニューから選択します ダークテーマバージョンを作成する。 これにより、正しい名前のクラスが作成されるため、そのスタイリング値は、サイトがダークモードで表示されている場合にのみ有効になります。

ダークモードのプレビュー

サイトのダークテーマのスタイルをプレビューする場合は、にあるダークサイトモードオプションを使用してOSダークモードをシミュレートできます。 キャンバス設定.

初心者向けのヒント

ダークサイトモードのキャンバスオプションは、メインのデザインキャンバスだけでなくアプリ内プレビューモードにも影響することに注意してください。

簡単な例

以下は、の背景色を設定するプロセスをカバーする簡単な例です。 Bloc 特にダークモードの場合は、この投稿に記載されているすべての手法を使用します。

28年2021月XNUMX日に更新

この記事は役に立ちましたか?

関連記事