CSS変数を変更してAPEXアプリケーションの見かけを変更する

確かOracle APEX 21.1だったと思うのですが、Oracle APEXのユニバーサル・テーマがリファクタリングされ、スタイルの調整にCSS変数を多用するようになりました。

リファクタリングの経緯などは、APEX Office Hourにて開発者のTim Kimberlさんが解説をしています。

Deep Dive: Universal Theme in APEX 21.1
https://asktom.oracle.com/pls/apex/asktom.search?oh=14166

いくつかは一般的なブラウザの開発ツールの使い方になりますが、Oracle APEXのアプリケーションでCSS変数を見つけて変更する方法を紹介します。

サンプル・データセットのEMP/DEPTに含まれる表EMPをソースとした対話モード・レポートのページを使って説明します。

このページのヘッダーの色を変更します。

ヘッダーの色であれば、テーマ・ローラーから変更できます。

開発者ツール・バーのカスタマイズから、テーマ・ローラーを呼び出します。

コンテナのヘッダーを選択し、色を変更します。実際にはテーマ・ローラーも、ヘッダー色に対応するCSS変数を変更しています。

テーマ・ローラーを使って変更できるCSS変数やユニバーサル・テーマのCSS定義は、ごく一部になります。これより、テーマ・ローラーを使わずにCSS変数を見つけ、その値を変更してみます。

見え方を変更したいHTML要素の上で右クリックを行い、コンテキスト・メニューを表示させます。メニューの中の検証を実行します。

開発者ツールが開き、見え方を変更したいHTML要素が選択された状態になります。

選択されたHTML要素に適用されているスタイルを確認します。

ヘッダー（CSSクラスはt-Header-branding）のバックグラウンド色（background-color）が--ut-header-background-colorで定義されていることが分かります。このCSS変数をクリックします。

CSS変数--ut-header-background-colorの値が設定されている箇所に表示が移動します。

CSS変数の値を変更し、効果を確認します。

変更した値の上で右クリックを行い、コンテキスト・メニューを表示します。メニューから宣言のコピーを実行します。

テーマ・ローラーのカスタムCSSに、以下を記述します。

.t-Header-branding {
    --ut-header-background-color: #c805a2;
}

保存を実行すると、CSS変数の変更が反映されます。

このような見かけの変更は、Oracle APEXの知識はほぼ不要でHTMLとCSSの知識があれば実施できます。

CSSの定義は、ページ・プロパティのCSSのインラインに記述することもできます。

以前に質問を受けたのですが、例えばダウンロードのダイアログに表示されるExcelのアイコンなども、同様の手順で変更できます。

Excelのアイコン上で検証を実行します。

Excelのアイコンは擬似要素の::beforeとして定義されています。コンテキスト・メニューを表示させ、ルールのコピーを実行します。

ルールのコピーにより、以下の定義がコピーされました。

.a-Icon.icon-ig-dl-xls:before, .a-Icon.icon-irr-dl-xls:before {
    content: "\e187";
}

これを、後方互換性を保つためにまだOracle APEXの静的ファイルとして残されている、Excelの画像ファイルに置き換えてみます。

.a-Icon.icon-ig-dl-xls:before, .a-Icon.icon-irr-dl-xls:before {
    content: url(#APEX_FILES#ws/download_xls_64x64.gif);
}

置換文字列APEX_FILESが含まれているため、ページ・プロパティのCSSのインラインに記述します。

ダウンロードのダイアログを開くと、ダウンロードのアイコンが以前のOracle APEXで使われていたExcelの画像に置き換わっていることが確認できます。

Oracle APEXのユニバーサル・テーマで使用されているCSS変数のリファレンスとして、以下のページが公開されています。

https://apex.oracle.com/pls/apex/r/apex_pm/ut/css-variables

しかし、このページで紹介されているCSS変数は、Oracle APEXで使用されているCSS変数のごく一部です。

Oracle APEXの開発者によると、CSS変数の変更による見かけのカスタマイズはサポートの対象外だが、一番安全なカスタマイズの方法である、とのことです。

Oracle APEXのバージョン21.2から、ユニバーサル・テーマのChange Logが公開されるようになっています。

Oracle APEXのアプリケーションに更新されたユニバーサル・テーマを適用するためにはテーマのリフレッシュを行なう必要があります。テーマのリフレッシュを行なう前に、ユニバーサル・テーマのChange Logを確認することで、バージョンアップによる影響をあらかじめ見積もることができます。

Oracle APEXのアプリケーションで、CSS変数を見つけて変更する方法の紹介は以上になりますす。

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完