コンテンツ部分のテーマ設定

ページのメインコンテンツ部分(属性値 data-role=“content” を指定したコンテナ)は、親の data-role=“page” を指定された要素の data-theme 設定に従って、背景色などのテーマが適用されます。コンテンツ部分に data-theme を指定すると、実際のコンテンツ部分の高さだけに指定した背景色があてられます。ページ全体は上位のものが使われるため、コンテンツが短い場合はフッタとの間におかしな色の隙間が出来てしまうかもしれません。

さらに、開閉式コンテンツのコンテンツ部分にはヘッダ部分とマッチさせるための data-content-theme 属性を使うこともできます。

開閉式ブロックのテーマ設定

開閉式コンテンツにも data-theme でテーマ指定できます。アイコンやボディ部分には現バージョンでテーマが適用されていませんが、個別に直接CSSを適用することは可能です。

テーマのサンプル

A theme swatch on content & collapsible

H1 Heading

This is a paragraph that contains strong, emphasized and linked text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.

I'm a themed collapsible

I have data-theme attribute set manually on my container to set the color to match the content block I'm in.