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

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

始める前に

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

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

必要なロール：アドミン

このタスクについて

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

このタスクについて

注:

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

手順

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

   適用

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

   注:

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

   順序

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

   注:

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

   スタイル

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

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

   タイプ

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

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

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

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

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

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

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

次のタスク

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