> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# iOS Universal Components のスタイルとテーマをカスタマイズする

> iOS の Universal Components のスタイルとテーマをカスタマイズする方法を説明します。

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="beta" terms="true" contact="Auth0 Support" />

Auth0 [iOS 向け Universal Components](https://github.com/auth0/ui-components-ios) では、デザイントークンモデルを採用しています。色、タイポグラフィ、間隔、角丸の半径、コンポーネントのサイズなどの視覚的なプロパティは、それぞれトークンとして定義されており、レイアウトを変更せずにオーバーライドできます。

Universal Components にはデフォルトの Auth0 テーマが用意されています。ブランドに合わせて独自のテーマを設定できます。

<div id="how-theming-works">
  ## テーマ設定の仕組み
</div>

iOS 向け Universal Components では、SwiftUI の `@Environment` プロパティラッパーを使用してテーマを設定します。任意の SwiftUI ビューに `.auth0Theme(_:)` ビューモディファイアを適用してください。すべての子コンポーネントに、注入された `Auth0Theme` が自動的にレンダリングされます。

<div id="zero-configuration">
  ### 設定不要
</div>

テーマを設定しない場合、iOS 向け Universal Components は Auth0 のデフォルトテーマをレンダリングします。次の例では、`MyAccountAuthMethodsView` コンポーネントをカスタマイズせずに表示しています。

```swift wrap lines theme={null}
import SwiftUI
import Auth0UniversalComponents

struct ContentView: View {
    var body: some View {
        MyAccountAuthMethodsView()
    }
}
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Auth0 のデフォルトテーマを読み込むために、追加の設定は必要ありません。カスタムテーマが指定されていない場合は、Universal Components が自動的に適用します。
</Callout>

<div id="override-a-subset-of-tokens">
  ### 一部のトークンをオーバーライドする
</div>

iOS 向け Universal Components では、他のすべてのトークンを Auth0 のデフォルトテーマでレンダリングしたまま、特定のトークンをオーバーライドできます。

次の例では、主要な背景色とテキストの色のみをオーバーライドします。

```swift wrap lines theme={null}
import SwiftUI
import Auth0UniversalComponents

struct ContentView: View {
    var body: some View {
        MyAccountAuthMethodsView()
            .auth0Theme(
                Auth0Theme(
                    colors: DefaultAuth0ColorTokens(
                        background: DefaultAuth0BackgroundColorTokens(primary: Color("BrandBlue")),
                        text: DefaultAuth0TextColorTokens(onPrimary: .white)
                    )
                )
            )
    }
}
```

タイポグラフィ、間隔、角丸、サイズのトークンについても同様です。

次の例では、タイポグラフィとボタンの角丸をオーバーライドします。

```swift wrap lines theme={null}
Auth0Theme(
    typography: DefaultAuth0TypographyTokens(
        body: Auth0TextStyle(
            font: .custom("Lato-Regular", size: 17),
            tracking: 0,
            lineSpacing: 7
        ),
        label: Auth0TextStyle(
            font: .custom("Lato-Medium", size: 16),
            tracking: 0.1,
            lineSpacing: 5
        )
    ),
    radius: DefaultAuth0RadiusTokens(button: 24)
)
```

<div id="configure-a-full-brand-theme">
  ### 完全なブランドテーマを設定する
</div>

3つのカラーカテゴリプロパティを実装した独自のブランディングテーマを作成し、`Auth0ColorTokens` コンテナに組み込みます。

```swift wrap lines theme={null}
struct BrandBackground: Auth0BackgroundColorTokens {
    var primary: Color { Color("Background/Primary", bundle: .main) }
    var primarySubtle: Color { Color("Background/Primary", bundle: .main).opacity(0.35) }
    var inverse: Color { Color("Background/Inverse", bundle: .main) }
    var accent: Color { Color("Background/Accent", bundle: .main) }
    var layerTop: Color { Color("Background/LayerTop", bundle: .main) }
    var layerMedium: Color { Color("Background/LayerMedium", bundle: .main) }
    var layerBase: Color { Color("Background/LayerBase", bundle: .main) }
    var error: Color { Color("Background/Error", bundle: .main) }
    var errorSubtle: Color { Color("Background/ErrorSubtle", bundle: .main).opacity(0.35) }
    var success: Color { Color("Background/Success", bundle: .main) }
    var successSubtle: Color { Color("Background/SuccessSubtle", bundle: .main) }
}

struct BrandColors: Auth0ColorTokens {
    var background: any Auth0BackgroundColorTokens { BrandBackground() }
    var text: any Auth0TextColorTokens { DefaultAuth0TextColorTokens() }
    var border: any Auth0BorderColorTokens { DefaultAuth0BorderColorTokens() }
}

MyAccountAuthMethodsView()
    .auth0Theme(Auth0Theme(colors: BrandColors()))
```

<div id="read-the-theme-in-your-own-views">
  ### 独自のビューでテーマを参照する
</div>

任意のSwiftビューで同じトークンを適用するには、`@Environment(\.auth0Theme)`プロパティラッパーを使用します。

```swift wrap lines theme={null}
struct MyCustomStep: View {
    @Environment(\.auth0Theme) private var theme

    var body: some View {
        VStack(spacing: theme.spacing.md) {
            Text("Almost there!")
                .auth0TextStyle(theme.typography.titleLarge)
                .foregroundStyle(theme.colors.text.bold)

            Button("Continue") { /* ... */ }
                .frame(height: theme.sizes.buttonHeight)
                .background(theme.colors.background.primary)
                .cornerRadius(theme.radius.button)
        }
        .padding(theme.spacing.md)
    }
}
```

<div id="token-reference">
  ### トークンリファレンス
</div>

<Accordion title="カラー — Auth0ColorTokens">
  カラーは、`Auth0BackgroundColorTokens`、`Auth0TextColorTokens`、`Auth0BorderColorTokens` の3つの用途別プロトコルに分かれています。これらは `Auth0ColorTokens` プロトコルに集約されます。

  すべてのカラーアセットは環境に応じて変化します。アセットカタログがライトモードとダークモードを自動的に処理します。

  **主要な背景色**

  | **トークン**                   | **用途**                    |
  | -------------------------- | ------------------------- |
  | `background.primary`       | CTAボタンの背景、主要なボーダー         |
  | `background.primarySubtle` | 控えめな主要背景色                 |
  | `background.inverse`       | コントラストを反転した背景             |
  | `background.accent`        | ブランドを表す、または注目を集めるUIのハイライト |

  **背景レイヤー**

  | **トークン**                 | **用途**         |
  | ------------------------ | -------------- |
  | `background.layerTop`    | オーバーレイとモーダル    |
  | `background.layerMedium` | カードと浮き上がったコンテナ |
  | `background.layerBase`   | アプリのメイン背景      |

  **フィードバック用背景色**

  | **トークン**                   | **用途**     |
  | -------------------------- | ---------- |
  | `background.error`         | エラー状態のコンテナ |
  | `background.errorSubtle`   | 控えめなエラーバナー |
  | `background.success`       | 成功状態のコンテナ  |
  | `background.successSubtle` | 控えめな成功バナー  |

  **テキスト**

  | **トークン**        | **用途**                |
  | --------------- | --------------------- |
  | `text.bold`     | 見出しと主要な本文テキスト         |
  | `text.regular`  | 補足テキスト、説明、キャプション      |
  | `text.disabled` | 無効時のテキストとプレースホルダーテキスト |

  **色付きサーフェス上のテキスト**

  | **トークン**         | **用途**                                      |
  | ---------------- | ------------------------------------------- |
  | `text.onPrimary` | `background.primary` 上のテキストとアイコン            |
  | `text.onSuccess` | `background.success` 上のテキストとアイコン            |
  | `text.onError`   | `background.error` 上のテキストとアイコン、バリデーションメッセージ |

  **ボーダー**

  | **トークン**         | **用途**                    |
  | ---------------- | ------------------------- |
  | `border.bold`    | コントラストが高いボーダー、または選択時のボーダー |
  | `border.regular` | 入力フィールドとカードのボーダー          |
  | `border.subtle`  | 控えめな区切り線                  |
  | `border.shadow`  | エレベーション用シャドウのボーダー         |
</Accordion>

<Accordion title="タイポグラフィ — Auth0TypographyTokens">
  各トークンは、`font`、`tracking`、`lineSpacing` をまとめた `Auth0TextStyle` です。`.auth0TextStyle(_:)` ビューモディファイアを使用して適用します。

  | **トークン**        | **書体** | **サイズ** | **太さ**   | **行の高さ** | **トラッキング** | **用途**               |
  | --------------- | ------ | ------- | -------- | -------- | ---------- | -------------------- |
  | `displayLarge`  | Inter  | 34 pt   | SemiBold | 41 pt    | −0.20 pt   | ヒーロー見出し、パスキー登録       |
  | `displayMedium` | Inter  | 28 pt   | SemiBold | 34 pt    | −0.10 pt   | 主要な画面タイトル、エラー見出し     |
  | `display`       | Inter  | 22 pt   | SemiBold | 28 pt    | −0.05 pt   | セクション見出し             |
  | `titleLarge`    | Inter  | 20 pt   | SemiBold | 25 pt    | 0 pt       | 画面タイトル、サブ見出し用カード     |
  | `title`         | Inter  | 17 pt   | SemiBold | 24 pt    | 0 pt       | コンテンツ内のタイトル          |
  | `body`          | Inter  | 17 pt   | Regular  | 24 pt    | 0 pt       | 説明、本文                |
  | `bodySmall`     | Inter  | 15 pt   | Regular  | 20 pt    | +0.10 pt   | 補足本文、脚注              |
  | `label`         | Inter  | 16 pt   | Medium   | 21 pt    | +0.10 pt   | ボタンラベル、フォームフィールドのラベル |
  | `helper`        | Inter  | 13 pt   | Regular  | 18 pt    | +0.20 pt   | キャプション、ヘルパーテキスト      |
  | `overline`      | Inter  | 11 pt   | Regular  | 16 pt    | +0.77 pt   | オーバーライン、カテゴリラベル      |

  <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
    ホストアプリケーションに書体 `Inter` がバンドルされていない場合、SwiftUIは自動的に `SF Pro` 書体を使用します。
  </Callout>
</Accordion>

<Accordion title="間隔 — Auth0SpacingTokens">
  間隔はデフォルトで`4 pt`グリッドに基づいています。間隔をカスタマイズする際は、生のピクセル値ではなく、デザインハンドオフでトークン名を使用してください。

  | **トークン** | **デフォルト** | **説明**                |
  | -------- | --------- | --------------------- |
  | `xxs`    | 4 pt      | 密接に関連する要素間の最小限の間隔     |
  | `xs`     | 8 pt      | グループ化された要素間の小さな間隔     |
  | `sm`     | 12 pt     | 中程度の内側余白              |
  | `md`     | 16 pt     | 標準的なコンポーネントおよびコンテナの余白 |
  | `lg`     | 24 pt     | 主要なセクション用の大きめの余白      |
  | `xl`     | 32 pt     | 特大の余白                 |
  | `xxl`    | 48 pt     | 2倍の特大余白               |
  | `xxxl`   | 56 pt     | 3倍の特大余白               |
</Accordion>

<Accordion title="角丸 — Auth0RadiusTokens">
  | **トークン**     | **デフォルト** | **使用状況**             |
  | ------------ | --------- | -------------------- |
  | `small`      | 8 pt      | 1文字入力セル (OTP、PINの各桁) |
  | `medium`     | 12 pt     | バナーおよびフィードバックカード     |
  | `inputField` | 14 pt     | テキスト入力、コード表示コンテナ     |
  | `button`     | 16 pt     | CTAボタン、認証方式カード       |
  | `pill`       | 24 pt     | ピル型のアウトラインボタン        |
</Accordion>

<Accordion title="サイズ — Auth0SizeTokens">
  | **トークン**                  | **デフォルト** | **使用状況**                         |
  | ------------------------- | --------- | -------------------------------- |
  | `buttonHeight`            | 48 pt     | すべての主要・副次アクションボタン                |
  | `inputHeight`             | 60 pt     | テキストおよび電話番号の入力フィールド              |
  | `size4xlDimen`            | 48 pt     | 1文字入力セルの幅                        |
  | `size5xlDimen`            | 56 pt     | 1文字入力セルの高さ                       |
  | `containerSizeLargeDimen` | 52 pt     | 読み取り専用のコード表示コンテナの高さ              |
  | `iconSmall`               | 16 pt     | 小型アイコン (シェブロン、情報インジケーター、チェックマーク) |
  | `iconMedium`              | 24 pt     | 標準アイコン (認証方式の画像)                 |
  | `iconLarge`               | 28 pt     | 大型アイコン (三点メニュー)                  |
</Accordion>

<div id="learn-more">
  ## 詳しく見る
</div>

<CardGroup cols={2}>
  <Card title="iOS SDK をインストールする" icon="download" href="/docs/ja-jp/get-started/universal-components/ios/ios-overview">
    iOS のプラットフォーム要件とインストール方法。
  </Card>

  <Card title="セルフサービスのアカウントセキュリティインターフェースを構築する" icon="key" href="/docs/ja-jp/get-started/universal-components/ios/components/my-account-overview">
    SDK を初期化し、トークンプロバイダーを Auth0 テナントに接続します。
  </Card>
</CardGroup>