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

コアスタイル、バリアント、および代替カラーパレットを構成することで、さまざまなユーザーに合わせて ネクストエクスペリエンス UI のルックアンドフィールをカスタマイズできます。コアスタイルはベーステーマを定義し、バリアントはアクセシビリティのニーズをサポートし、代替カラーパレットはエンドユーザーに外観のカスタマイズオプションを提供します。

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

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

テーマビルダーのテーマの色

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

注:

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

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

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

バリアントと代替カラーパレットはどちらもバリアントに分類される UX スタイルレコードですが、目的は異なります。

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

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

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

注:

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

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

注:

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