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

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間:2分
  • コアスタイル、バリアント、および代替カラーパレットを構成することで、さまざまなユーザーに合わせて ネクストエクスペリエンス UI のルックアンドフィールをカスタマイズできます。

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

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

    の色 テーマビルダー

    カラーピッカーを使用して、キャンバスの背景色を変更します。
    注:
    キャンバスの色の更新はインスタンスには適用されません。編集したテーマをインスタンスに公開する場合、コンポーネントに固有のフックのみがインスタンスに適用されます。
    テーマの色を編集するときは、カラーピッカーでコントラスト比を表示できます。パレットまたはマイカラービューから色を変更すると、値が更新されます。

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

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

    代替カラーパレットは、テーマの色に加えることができる変更です。テーマビルダーマネージャーのページビューで、デフォルトの Polaris テーマを除く任意のテーマに定義できます。既存のテーマを使用して代替カラーパレットを作成すると、代替カラーパレットはそのプライマリテーマとグループ化され、最初はそのロゴ、色、タイポグラフ、および形状スタイルが共有されます。最初は、プライマリテーマとの唯一の違いは、一意の名前を割り当てることです。

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

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

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