2020年8月26日水曜日

ページ・アイテムの色を指定する

 ページ・アイテムの色を指定するには、どのようにすればよいのかという質問があったので、確認してみました。

まず、Oracle APEXのユニバーサル・テーマでは、色を指定するためのCSSクラスをあらかじめ用意されています。

https://apex.oracle.com/pls/apex/apex_pm/r/ut/color-and-status-modifiers


ですので、この中から適切な色となるクラスを選んで、詳細CSSクラスへ設定することでテキストの色を変更することができます。

例えば、u-color-8-textを設定するとページ・アイテムの表示は以下のようになります。

u-color-8-bgを指定すると、以下のようになります。


ユニバーサル・テーマはStateful Color Utilitiesとして、いくつかの状態にたいして指定する色を決めています。たとえば、危険を意味する色、警告を意味する色、単なる情報を意味する色などです。定義は以下になります。


ですので、直接色を指定するのではなく、どういった意味合いの色なのかを指定し、色、それ自体はテーマ・ローラーで割り当てるようにすると、標準の部分も含めて配色が変わります。

例えば、u-success-textを詳細のCSSクラスに設定します。標準では文字は緑色になります。


Oracle APEXの標準機能によって表示される成功メッセージも緑色です。テーマ・ローラーを開いて、StatesのSuccessに指定されている色を変更します。デフォルトでは緑色です。


青にすると、u-success-textとして指定した文字も、標準のメッセージも共に青に変更されます。このようにすることで、アプリケーションの配色に一貫性を持たせることが可能になります。



先ほど、u-color-8-textを指定することで文字を橙色に設定しました。この色はテーマ・ローラーのPalletの指定で変更できます。Color 8を赤に変更してみました。



Oracle APEXのユニバーサル・テーマでの色の扱いについての説明は(英語ですが)以下になります。


ページ・アイテムの色指定についての説明は以上です。