> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-feat-sdk-reference-docs.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 テーマが用意されています。ブランドに合わせて独自のテーマを設定できます。

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

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

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

テーマを設定しない場合、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>

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

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)
)
```

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

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()))
```

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

任意の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)
    }
}
```

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

<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>

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

<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>