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

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

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

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

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

    の色 テーマビルダー

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

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

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

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

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

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

    注:
    ダークバリアントは、以前は UI16 と呼ばれていたコア UI には適用されません。コア UI は、無効になっている場合 Next Experience に使用するインターフェイスです。ただし、ダークバリアントは、次の UI アセットに拡張されます。
    • カタログアイテム
    • クラシック環境のフォームとリスト
    • ダッシュボード
    • ナレッジ記事
    • レポート
    • ビジュアル タスク ボード
    • ワークスペース