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

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

始める前に

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

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

必要なロール：admin

このタスクについて

ネクストエクスペリエンスには、ポラリスとコーラルの2つのテーマが含まれています。独自のテーマを作成または変更する際の開始点として、どちらのテーマも再利用またはカスタマイズできます。

このタスクについて

注:

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

手順

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

   適用

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

   注:

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

   順序

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

   注:

   カスタム スタイルを使用する場合は、スタイルの順序番号が標準の [Polaris] または [Coral (コーラル)] スタイルよりも大きいことを確認してください。

   スタイル

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

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

   タイプ

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

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

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

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

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

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

15. [Submit (送信)] を選択します。
16. [Update (更新)] を選択します。

次のタスク

カスタムテーマを公開するには、「 での複数のテーマの公開 ネクストエクスペリエンス」を参照してください。