テーマ変数を使用して色を定義するようにフォントアイコンを構成する

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間：3分

    • sys_ux_themeレコードの CSS カスタムプロパティを指定して、フォントアイコンの色を定義します。

    始める前に

    フォントアイコンの色を定義するために使用するテーマ変数のsys_ux_themeレコードを知っている必要があります。テーマ変数に必要な値は、sys_ux_themeプロパティテーブルの CSS カスタムプロパティです。

    必要なロール：admin

    このタスクについて

    テーマ変数は、フォントアイコンにのみ適用できます。

    画面設定のワークフロー内でアイコンを設定するか、モバイルアプリビルダーメニューから [カードとアイコン] カテゴリを選択してアイコンを設定できます。この手順では、[ カードとアイコン] カテゴリを使用します。

    手順

    1. 移動先 すべて > システムモバイル > モバイルアプリビルダー.
      モバイルアプリビルダー が新しいブラウザータブで開き、アプリケーションスコープ選択画面が表示されます。
    2. 作業しているアプリケーションスコープを検索し、アプリケーションスコープの名前を選択します。
      モバイルアプリビルダー カテゴリのホーム画面が表示されます。
    3. [カードとアイコン] カテゴリを選択し、[新規] を選択します。
    4. カードまたはアイコンの作成 ダイアログ ボックスで、 アイコン を選択し、 続行 を選択します。
    5. [アイコン] フォームで、アイコン の名前 を入力します。
      アイコンを識別しやすい名前を選択してください。
    6. 「タイプ」ドロップダウンリストから 、「フォント」を選択します。
    7. [外観を設定] セクションで、[ スタイル] フィールドと [値 ] フィールドに次の情報を入力して、テーマ変数を使用して色を定義するフォントアイコンを構成します。

      プラスアイコンを選択して行を追加します。

      スタイル 値
      フォント名を入力

      次のいずれかのフォントファミリを入力します。

      • now-mobile-icons

        これらのアイコンは、画面で使用するように設計されています。リスト画面やブラウザー画面に移動するリストやセクションの宛先に使用します。これらのアイコンを使用して、ユーザーが移動するワークフローまたは画面を表します。

      • now-mobile-icons-cards

        これらのアイコンをカードの本文に使用します。

      • now-mobile-icons-buttons

        これらのアイコンは、機能に使用するように設計されています。カードにあるボタンやクイックアクションに使用できます。

      • now-mobile-icons-ALPnavbar

        これらのアイコンはモバイル画面の右上隅に表示され、別の画面へのナビゲーションとして使用されます。
      値を入力

      使用するフォントファミリのアイコンを識別するコードを入力します。たとえば、 e903 は、 now-mobile-icons-buttons フォント ファミリの単色の買い物かごアイコンのコードです。

      フォント ファミリのアイコン コードの一覧については、[参照トピックへのリンクを追加] を参照してください。

      「FontColorVariable」と入力して、アイコンの色のテーマ変数を指定します。

      この構成はオプションです。色を指定しない場合、デフォルトのアイコンの色は黒です。16 進数のカラーコードを使用する場合は、16 進数のカラーコードを使用したアイコンの色の構成に関する情報が記載されている [「フォントタイプアイコンの構成」へのリンク] を参照してください。

      使用する色のテーマ変数を入力します。たとえば、次の CSS カスタムプロパティがあるとします。

      --now-accordion-color
      名前を入力

      フォントファミリのアイコンにリストされている名前を入力します。たとえば、 now-mobile-icons ファミリで買い物かごアイコンを使用する場合は、「 買い物かご」と入力します。

      フォント ファミリ アイコン名の一覧については、 モバイルアイコン参照を参照してください。
    8. [保存] を選択します。