リファクタリングされたユニバーサル・テーマ

 パッと見た目では気がつかないのですが、Oracle APEX 21.1に含まれているユニバーサル・テーマ（のテンプレート）は、CSS変数を使うように書き変えられています。

サンプル・データセットのEMP/DEPTをインストールして作成したアプリケーションを例に、どのようにリファクタリングされたのか紹介します。

Oracle APEX 20.2で作成したアプリケーションです。

Oracle APEX自体が21.1にアップグレードされても、テーマをリフレッシュするまではリファクタリングされたユニバーサル・テーマは適用されません。

新しいバージョンのユニバーサル・テーマがあり、アプリケーションに適用可能な場合は共有コンポーネントを開くと、テーマのリフレッシュを行うボタンが表示されます。

テーマのリフレッシュを行った後（コピーしたアプリケーションで実施するとよいでしょう）、アプリケーションを実行して確認します。

見た目では違いは分かりません。（違いが出ないようにリファクタリングされているので、当然と言えば当然ですが。。。)

ブラウザの開発者ツールを使って確認します。--utで始まる大量のCSS変数が定義されていることが確認できます。

21.1以前のユニバーサル・テーマでは、CSS変数はほとんど使用されていません。

あまり良い例が思いつかないのですが、フォントをsans-serifからserifに変えてみます。

テーマ・ローラを開いて、カスタムCSSとして以下を設定します。

:root {

--ut-base-font-family: serif;

}

フォントがいわゆる明朝体に変わっていることが確認できます。Oracle APEX 21.1からはテーマ・ローラーもCSS変数を変更するような実装になっています。テーマ・ローラーで設定可能であれば、CSS変数を直接扱わなくてもよいでしょう。

テーマ・ローラ以外では、ページのプロパティとしてCSSのインラインに設定することによっても、CSS変数を変更することができます。

CSSに静的ファイルを使用する方法などもあります。こちらは以前に記事を書いています。

ユニバーサル・テーマとして定義されているCSS変数の一覧や説明といったものは、残念ですが無いようです。

以上になります。

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

完