Next Experienceテーマを構成する

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む3読むのに数分

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

    始める前に

    次のシステムプロパティが True に設定されていることを確認します。
    • glide.ui.polaris.experience
    • glide.ui.polaris.dark_themes_enabled - このテーマで Polaris ダークバリアントを再利用します。

    必要なロール：admin

    このタスクについて

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

    手順

    1. 移動先 すべて > Now Experience フレームワーク > テーマ管理 > テーマ.
    2. 新規 を選択してテーマ レコードを作成します。
    3. テーマの名前と説明を入力します。[UX テーマ] フォーム。
    4. [他のアクション] アイコン ( [他のアクション] アイコン) を選択し、[ 保存] を選択します。
    5. [ Compositional: App Theme] タブで、行を挿入してテーマに関連付けられたスタイルを追加します。
      次の 4 つの列に値を割り当てます。
      適用
      適用性は、基本テーマを上書きするために指定されています。適用性の制約を満たすユーザーには、基本スタイルではなくテーマでこれらの上書きが表示されます。たとえば、異なるフォントのスタイルをマネージャーに適用できます。マネージャーの適用性を満たすユーザーには、Next Experience UI で異なるフォントが表示されます。これにより、基本システムのテーマ値が上書きされます。管理者は、該当する対象者に合わせて変更を加えたテーマ全体をコピーまたは作成する必要はありません。
      注:
      [適用性制約] を空のままにすると、すべてのユーザーにスタイルが適用されます。
      順番
      順番は、スタイルが適用されるタイミングを指定します。順序が高いほど、その優先度は高くなります。
      注:
      カスタム スタイルを使用する場合は、スタイルの順序番号が標準の Polaris スタイルよりも大きいことを確認してください。
      スタイル
      4 つの主要なスタイルを設定できます。Polaris テーマで使用されているスタイル名は編集できませんが、このテーマから各スタイルに関連付けられている JSON コードをコピーして、カスタム スタイルのフォームに貼り付けて編集することはできます。
      • 色： テーマと追加する基本バリアントの色プロパティ。色スタイルの基本セクションでは、テーマで使用される色のサブセットが RGB 値で定義されます。テーマは、アプリケーション内でこれらの色の 20 を超えるグラデーションを生成します。
      • 形状とフォーム: 境界線、ボタン、その他の UI コントロールの外観と操作性。
      • 画像： アプリケーションのテーマで使用する画像を追加します。
      • タイポグラフィ： アプリケーション全体で使用されるフォント。
      タイプ
      コアとバリアントの 2 つのタイプがあります。コア スタイルには、色、形と形、タイポグラフ、画像などがあります。バリアントは、ユーザーが環境設定で選択できるテーマの異なるバージョン、異なる色です。最も一般的なバリエーションは、テーマのダークバージョンです。ダーク テーマは、 に付属 Next Experienceする唯一のバリアントです。詳細については、「でのテーマの探索 Next Experience」を参照してください。
    6. [スタイル] フィールドを選択し、UX スタイル検索アイコンを選択します。
    7. [新規] を選択します。
    8. プライマリ色、セカンダリ色、中間色を選択します。
      注:
      テーマは複数の変数で構成されているため、デフォルトのPolarisテーマの色がさまざまな場所で表示されることに気付く場合があります。
    9. 組織のブランディングカラーを取得したら、 カラージェネレーター https://theme.deoprototypes.com/color-generator-algo-v1に移動します。
    10. [ 自動生成 ] ボタンを選択します。

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

    11. 組織の色の 16 進数コード値を入力します。
    12. [生成] をクリックします。
    13. [ JSON をコピー ] をクリックして、CSS 変数を収集します。
    14. UX スタイルフォームに入力します。[UX スタイル] フォーム。
      フィールド 説明
      名前 UX スタイルの名前。
      タイプ
      • コア
      • バリアント
      型の詳細については、「 コア スタイルとバリアントの違い」を参照してください。
      スタイル 色、形状、およびフォームの値。値には色もあれば、境界線のようにピクセル値もあります。
      重要:
      JSON コードは次のようにラップする必要があります。プロパティ値の文字列。
      アプリケーション UX スタイルのスコープ。
    15. [送信] を選択します。
    16. [更新] を選択します。
      注:
      新しいテーマを使用してデフォルトのテーマを上書きするには、「」を参照してください テーマを Next Experience 上書き。