コアスタイル、色、バリアント、および代替カラーパレット

コアスタイル、バリアント、および代替カラーパレットを構成することで、さまざまなユーザーに合わせて ネクストエクスペリエンス UI のルックアンドフィールをカスタマイズできます。

のコアスタイル テーマビルダー

コアスタイルは、スタイルの基本バージョンです。コア スタイルには、色、形状とフォーム、タイポグラフ、画像が含まれます。

の色 テーマビルダー

コンポーネントを編集するときは、カラーピッカーを使用してキャンバスの背景色を変更し、コンポーネントの色がさまざまな背景でどのようにレンダリングされるかを表示します。

注:

キャンバスの色を更新しても、インスタンスには適用されません。編集したテーマをインスタンスに公開する場合、コンポーネントに固有のフックのみがインスタンスに適用されます。

テーマの色を編集するときは、カラーピッカーでコントラスト比を表示できます。パレットまたは [マイカラー] ビューから色を変更すると、値が更新されます。

のバリアント/代替カラーパレット テーマビルダー

バリアントと代替カラーパレットはどちらも、バリアントとして分類される UX スタイルレコードのタイプです。

バリアントは既存のテーマの代替バージョンで、通常はアクセシビリティを考慮して設計されており、ユーザーが設定で選択できます。バリアントの例としては、 ネクストエクスペリエンス に付属するデフォルトの Polaris または Coral テーマのダークバージョンがあります。ダークバリアントを使用すると、明るい背景を暗い背景に置き換え、それに応じてテキストの色を対比させることで、視覚障害のあるユーザーのアクセシビリティを向上させることができます。

代替カラーパレットは、テーマの色に加えることができる変更であり、外観の目的で設計されています。代替カラーパレットを使用すると、ユーザーはコアテーマに影響を与えることなく、明暗オプションなどのさまざまな視覚スタイルを切り替えることができます。このパレットは、デフォルトの [Polaris] または [デフォルトの Coral テーマ] を除くすべてのテーマの [ テーマビルダー マネージャー] ページで定義できます。既存のテーマを使用して代替カラーパレットを作成すると、代替カラーパレットはそのプライマリテーマとグループ化され、最初はロゴ、色、タイポグラフ、および形状スタイルが共有されます。最初は、プライマリテーマとの唯一の違いは、一意の名前を割り当てることです。

次に、代替カラーパレットのプライマリ色を定義します。この色は、ナビゲーションバー、メニュー、およびその他の一般的なコンポーネントを識別するために使用されます。同様に、必要に応じてセカンダリ色を定義します。インターフェイスでセカンダリ色が必要ない場合は、プライマリ色が使用されます。最後に、分割線とコンテナの定義に役立つ中間色を定義します。利用可能なベースパレットは、明と暗の 2 つです。

注:

セカンダリ色と中間色は、暗い代替カラーパレットでは編集できません。

選択した色を使用してパレットが作成されたら、名前を変更できます。レベルも で利用可能なすべての UI 資産をプレビューする ServiceNow AI Platform を使用して、インスタンスに適用したときにどのようにレンダリングされるかを可視化します.

注:

ダークバリアント 適用されないコア UI (以前は UI16 と呼ばれていました)。コア UIは、ネクストエクスペリエンスが非アクティブの場合に使用するインターフェイスです。ただし、暗いバリアントは、ほとんどの側面 ネクストエクスペリエンスの)にまで及びます。