ネクストエクスペリエンステーマの構成

作成したスタイルを ネクストエクスペリエンス テーマに追加して、ユーザーエクスペリエンスのルックアンドフィールを変更します。

始める前に

sys_properties.list にある次のシステムプロパティが True に設定されていることを確認します。

• glide.ui.polaris.experience
• glide.ui.polaris.dark_themes_enabled:このテーマで ネクストエクスペリエンス ダークバリアントを再利用します。

必要なロール：admin

このタスクについて

デフォルトの ネクストエクスペリエンス テーマは「ポラリス」と呼ばれています。独自のテーマを作成または変更するときの開始点として、テーマを再利用またはカスタマイズできます。

このタスクについて

注:

テーマビルダー で作成したテーマをカスタマイズしていて、無効な JSON コードを入力した場合、テーマレコードを保存することはできません。UX テーマレコードでの作業中に、[ テーマビルダーで開く ] ボタンを使用して、[エディター] ページに移動できます。詳細については、「でテーマを管理または編集する テーマビルダー」を参照してください。

手順

1. 移動先 すべて > Now Experience フレームワーク > テーマ管理 > テーマ.
2. [新規] を選択してテーマレコードを作成します。
3. テーマの名前と説明を入力します。
4. [他のアクション] アイコン ( ) を選択し、[ 保存] を選択します。
5. [ コンポジション:アプリのテーマ ] タブで、行を挿入してテーマに関連付けられているスタイルを追加します。
   次の 4 つの列に値を割り当てます。

   適用

   ベーステーマを上書きします。適用性の制約を満たすユーザーには、基本スタイルではなくテーマにこれらのオーバーライドが表示されます。たとえば、異なるフォントのスタイルをマネージャーに適用できます。マネージャーの適用性を満たすユーザーには、 ネクストエクスペリエンス UI に異なるフォントが表示されます。これは、ベースシステムのテーマの値を上書きします。アドミニストレーターは、該当する対象者に合わせて変更を加えたテーマ全体をコピーまたは作成する必要はありません。

   注:

   [適用性の制約] を空のままにすると、すべてのユーザーにスタイルが適用されます。

   順序

   スタイルをいつ適用するかを指定します。順序が高いほど、優先度が高いことを意味します。

   注:

   カスタム スタイルを使用する場合は、スタイルの順序番号が標準のポラリス スタイルよりも大きいことを確認してください。

   Style (スタイル)

   4 つの主要なスタイルを設定します。Polaris テーマで使用されるスタイル名は編集できませんが、このテーマから各スタイルに関連付けられている JSON コードをコピーし、カスタムスタイルのフォームに貼り付けて編集することはできます。

   • 色： テーマと追加する基本バリアントの色プロパティを指定します。色スタイルのベースセクションでは、テーマで使用される色のサブセットが赤、緑、青 (RGB) 値で定義されます。テーマは、アプリケーション内でこれらの色の 20 を超えるグラデーションを生成します。
   • 形状とフォーム: 境界線、ボタン、その他の UI コントロールのルックアンドフィールを指定します。
   • 画像： アプリケーションのテーマで使用される画像を追加します。
   • タイポグラフィ： アプリケーション全体で使用されるフォントを指定します。

   タイプ

   Core と Variant の 2 つのタイプを指定します。コア スタイルには、色、形状とフォーム、タイポグラフ、および画像が含まれます。バリアントは、ユーザーが選択できるさまざまな色など、テーマの異なるバージョンを指定します。最も一般的なバリエーションは、テーマのダークバージョンです。ダークテーマは、 ネクストエクスペリエンスに同梱されている唯一のバリエーションです。詳細については、「でのテーマの探索 ネクストエクスペリエンス」を参照してください。

6. [スタイル] フィールドを選択し、
7. [新規] を選択します。
8. プライマリ色、セカンダリ色、および中間色を選択します。
   注:

   テーマは複数の変数で構成されているため、デフォルトの Polaris テーマの色がさまざまな場所に表示される場合があります。
9. 組織のブランディングカラーを入手したら、 https://theme.deoprototypes.com/color-generator-algo-v1のカラージェネレーターに移動します。
10. [ Auto Generate (自動生成 )] ボタンを選択します。

    モーダルがポップアップし、組織から 3 つの色を入力するように求められます。

11. 組織の色の 16 進数コード値を入力します。
12. [生成] を選択します。
13. [ JSON のコピー] を選択して CSS 変数を収集します。
14. UX スタイルフォームに入力します。

    Field (フィールド)	説明
    名前	UX スタイルの名前。
    タイプ	Core バリアント 型の詳細については、「 コア スタイルとバリアントの違い」を参照してください。
    Style (スタイル)	色、形状、およびフォームの値。値には色付きのものもあれば、境界線などのピクセル値もあります。 重要: JSON コードは、次の例に示すようにラップする必要があります。
    アプリケーション	UX スタイルのスコープ。

15. [送信] を選択します。
16. [更新] を選択します。
    注:

    新しいテーマを使用してデフォルトのテーマを上書きするには、「 ネクストエクスペリエンステーマを上書き」を参照してください。