UI ビルダー でのカスタムテーマの作成 (高度な機能)

デフォルトのコンポーネントスタイルを上書きできるように、カスタムテーマを作成します。テーマレコードで独自のスタイルプロパティを定義できます。

始める前に

必要なロール：ui_builder_admin または admin

このタスクについて

テーマを使用すると、エクスペリエンスの視覚的なスタイルを変更し、ブランドのルックアンドフィールを表現できます。1 つのエクスペリエンス専用にカスタムテーマを作成する前に、アプリのテーマ作成計画を作成することを検討してください。詳細については、「UI Builder ページの表示スタイルの管理」を参照してください。

手順

1. テーマを適用するには、次のいずれかの操作を行います。
   • エクスペリエンスへのテーマの適用 の手順に従ってください。
     1. 移動先 メニュー > エクスペリエンスの設定を編集 > ブランディングとテーマ.
     2. [テーマ] の [ブランディングとテーマ] の設定画面で、 [テーマを作成] を選択します。
   • 移動先 Now Experience フレームワーク > テーマ.
   テーマリストビューが表示されます。
2. テーマを作成するには、[ 新規] をクリックします。
3. フォームのフィールドに入力します。

   フィールド	説明
   名前	テーマを説明する名前。この名前は、[UI ビルダー エクスペリエンスの設定] メニューの選択可能なテーマのリストに表示されます。
   説明	テーマの詳細な説明。
   拡張	スタイリング構成から継承する別の テーマレコード。デフォルトの ServiceNow フォントとコンポーネントの間隔を継承するには、[リストから参照] アイコン () を選択し、リストから [デフォルト] テーマを選択します。 メインのカスタムテーマからテーマを拡張する方法の詳細については、「テーマの拡張」を参照してください。
   アプリケーション	エクスペリエンスを含むアプリケーション。
   アクティブ	選択したままにします。
   ドメイン	テーマに関連付けられているドメイン。
   上書き	このフィールドは空のままにする必要があります。
   テーマ	テーマの Next Experience CSS カスタムプロパティと値を JSON オブジェクトとして書式設定して入力します。 このフィールドでテーマを構成する際には、次の質問を考慮してください。 次のタイプの要素について、ユーザーに表示するブランド色はどれですか？ プライマリ、または最も重要なアクション。 セカンダリ、または補足アクション。 ブランド色を選択したら、テーマの次の Next Experience CSS カスタムプロパティに色値を RGB トリプレットとしてアサインすることができます。 表 : 1. テーマの Next Experience CSS カスタムプロパティ CSS カスタムプロパティ アサインする RGB 色値 --now-color_brand--primary プライマリブランド色。 注: この色は明るい背景に頻繁に表示されるため、彩度の高いより暗い色が最適です。暗い背景は現在サポートされていません。 --now-color--primary-1 前記と同じです。プライマリブランド色。 注: この色は明るい背景に頻繁に表示されるため、彩度の高いより暗い色が最適です。暗い背景は現在サポートされていません。 --now-color--primary-0 プライマリブランド色のやや明るいバリエーション。 --now-color--primary-2 プライマリブランド色のやや暗いバリエーション。 --now-color--primary-3 プライマリブランド色の最も暗いバリエーション。 --now-color_brand--secondary セカンダリブランド色。 --now-color--secondary-1 前記と同じです。セカンダリブランド色。 --now-color--secondary-0 セカンダリブランド色のやや明るいバリエーション。 --now-color--secondary-2 セカンダリブランド色のやや暗いバリエーション。 --now-color--secondary-3 セカンダリブランド色の最も暗いバリエーション。 次の画像は、ワークスペース およびポータルで Next Experience CSS カスタムプロパティが表示される場所を示しています。テーマで使用する CSS カスタムプロパティを決定するときは、これらの画像を参照してください。 図 : 1. ワークスペース エクスペリエンスで CSS カスタムプロパティが表示される場所 図 : 2. ポータルエクスペリエンスで CSS カスタムプロパティが表示される場所 テーマ構成のスニペットの例を次に示します。 { "--now-color_brand--primary": "23,64,139", "--now-color--primary-1": "23,64,139", "--now-color--primary-0": "220,226,238", "--now-color--primary-2": "18,48,105", "--now-color--primary-3": "12,32,70", "--now-color_brand--secondary": "201,8,42", "--now-color--secondary-1": "201,8,42", "--now-color--secondary-0": "247,218,223", "--now-color--secondary-2": "151,6,32", "--now-color--secondary-3": "151,6,32" } 注: テーマ [sys_ux_theme] レコードでは 16 進数の色値はサポートされていません。すべての色値は RGB トリプレットである必要があります。

4. テーマの作成を終了するには、[送信] を選択します。

次のタスク

エクスペリエンスにテーマを適用して、カスタムスタイルがアプリ内のすべての視覚要素に適用されるようにします。詳細については、「エクスペリエンスへのテーマの適用」を参照してください。

• UI ビルダー のテーマの拡張
  メインテーマのバリエーションを、別のテーマに拡張して作成します。