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

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

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

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 [Universal Components for Android](https://github.com/auth0/ui-components-android) では、デザイントークンモデルを採用しています。色、タイポグラフィ、余白、角丸の半径、コンポーネントのサイズといった視覚的なプロパティは、それぞれレイアウトを変更することなくオーバーライドできるトークンとして定義されています。

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

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

Universal Components for Android では、Material 3 の `MaterialTheme` パターンに準拠した Jetpack Compose テーマを使用します。

`Auth0Theme { ... }` で SDK コンテンツをラップしてトークンを提供するか、`themeConfiguration` を `AuthenticatorSettingsComponent` に直接渡します。

任意のコンポーザブル内で、`Auth0Theme.colors`、`Auth0Theme.typography`、`Auth0Theme.shapes`、`Auth0Theme.dimensions`、`Auth0Theme.sizes` を使用してトークンを参照できます。

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

テーマを設定しない場合、Universal Components for Android では Auth0 のデフォルトテーマがレンダリングされます。次の例では、`AuthenticatorSettingsComponent` をカスタマイズせずに表示しています。

```kotlin wrap lines theme={null}
@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent()
}
```

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

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

Universal Components for Android では、その他のすべてのトークンは Auth0 のデフォルトテーマでレンダリングされますが、特定のトークンをオーバーライドできます。

次の例では、トークン `Auth0Color.light().copy(...)`、`Auth0Color.dark()`、または `Auth0Typography.default().copy(...)` をオーバーライドします。

```kotlin wrap lines theme={null}
@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent(
        themeConfiguration = Auth0ThemeConfiguration(
            color = Auth0Color.light().copy(
                backgroundPrimary = Color(0xFFFF6B00),
                textOnPrimary = Color.White
            )
        )
    )
}
```

<div id="force-dark-mode">
  ### ダークモードを強制する
</div>

ダークモードを強制するには、コンポーネントを `Auth0Theme(darkTheme = true)` でラップするか、ダークカラースキームを明示的に指定します。

```kotlin wrap lines theme={null}
// オプション 1: Auth0Theme を使用してダークモードを強制
@Composable
fun MFASettingsScreen() {
    Auth0Theme(darkTheme = true) {
        AuthenticatorSettingsComponent()
    }
}

// オプション 2: ダークカラースキームを明示的に指定
@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent(
        themeConfiguration = Auth0ThemeConfiguration(
            color = Auth0Color.dark()
        )
    )
}
```

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

色、タイポグラフィ、形状を組み合わせた独自のブランディングテーマを、単一の `Auth0ThemeConfiguration` 設定として指定します。

```kotlin wrap lines theme={null}
@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent(
        themeConfiguration = Auth0ThemeConfiguration(
            color = Auth0Color.light().copy(
                backgroundPrimary = Color(0xFF0066CC),
                textOnPrimary = Color.White,
                backgroundLayerBase = Color(0xFFF5F5F5),
                backgroundLayerMedium = Color.White,
                textBold = Color(0xFF1F1F1F),
                textDefault = Color(0xFF636363),
                backgroundError = Color(0xFFFF4444),
                backgroundSuccess = Color(0xFF00CC66),
                borderDefault = Color(0xFFE0E0E0)
            ),
            typography = Auth0Typography.default().copy(
                displayMedium = TextStyle(fontSize = 22.sp, fontWeight = FontWeight.Bold),
                body = TextStyle(fontSize = 18.sp)
            ),
            shapes = Auth0Shapes(
                none = RoundedCornerShape(0.dp),
                extraSmall = RoundedCornerShape(4.dp),
                small = RoundedCornerShape(8.dp),
                medium = RoundedCornerShape(12.dp),
                large = RoundedCornerShape(16.dp),
                extraLarge = RoundedCornerShape(24.dp),
                full = RoundedCornerShape(100.dp)
            )
        )
    )
}
```

<div id="read-theme-tokens-in-your-own-composables">
  ### 独自のコンポーザブルでテーマトークンを読み取る
</div>

accessor オブジェクトを使用して、`Auth0Theme { ... }` コンポーザブル内のテーマトークンにアクセスします。

```kotlin wrap lines theme={null}
@Composable
fun CustomAuthCard() {
    Card(
        shape = Auth0Theme.shapes.medium,
        colors = CardDefaults.cardColors(
            containerColor = Auth0Theme.colors.backgroundLayerMedium
        )
    ) {
        Column(modifier = Modifier.padding(Auth0Theme.dimensions.spacingMd)) {
            Text(
                text = "Authenticator",
                style = Auth0Theme.typography.title,
                color = Auth0Theme.colors.textBold
            )
            Text(
                text = "Enabled",
                style = Auth0Theme.typography.bodySmall,
                color = Auth0Theme.colors.textDefault
            )
        }
    }
}
```

<div id="switch-themes-at-runtime">
  ### 実行時にテーマを切り替える
</div>

テーマ設定をstateに保持しておけば、画面を再作成することなく、ライトテーマとダークテーマ (またはbrandバリエーション) を切り替えられます。

```kotlin wrap lines theme={null}
@Composable
fun MFASettingsScreen() {
    var isDarkMode by remember { mutableStateOf(false) }

    val themeConfig = Auth0ThemeConfiguration(
        color = if (isDarkMode) Auth0Color.dark() else Auth0Color.light()
    )

    Column {
        Switch(checked = isDarkMode, onCheckedChange = { isDarkMode = it })
        AuthenticatorSettingsComponent(themeConfiguration = themeConfig)
    }
}
```

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

<Accordion title="カラー — Auth0Color">
  カラーをカスタマイズするには、`Auth0Color.light()` および `Auth0Color.dark()` ファクトリーをベースとして使用し、`.copy(...)` で特定のトークンをオーバーライドします。

  | **トークン**                                                                                   | **用途**                |
  | ------------------------------------------------------------------------------------------ | --------------------- |
  | `backgroundPrimary`, `backgroundPrimarySubtle`, `backgroundInverse`, `backgroundAccent`    | CTA およびアクセント用のサーフェス   |
  | `backgroundLayerTop`, `backgroundLayerMedium`, `backgroundLayerBase`                       | オーバーレイ、カード、アプリ背景のレイヤー |
  | `backgroundError`, `backgroundErrorSubtle`, `backgroundSuccess`, `backgroundSuccessSubtle` | フィードバック用のサーフェス        |
  | `borderBold`, `borderDefault`, `borderSubtle`, `borderShadow`                              | 強調および階層表現用の境界線        |
  | `textBold`, `textDefault`, `textDisabled`                                                  | 見出し、本文、無効状態のテキスト      |
  | `textOnPrimary`, `textOnSuccess`, `textOnError`                                            | 色付きのサーフェス上のテキスト       |
</Accordion>

<Accordion title="タイポグラフィ — Auth0Typography">
  タイポグラフィをカスタマイズするには、Compose トークンの `TextStyle` を使用します。`Auth0Typography.default().copy(...)` でオーバーライドできます。

  | **トークン**                   | **用途**                  |
  | -------------------------- | ----------------------- |
  | `displayMedium`, `display` | ヒーロー見出し、主要な画面見出し        |
  | `titleLarge`, `title`      | 画面タイトル、コンテンツ内のタイトル      |
  | `body`, `bodySmall`        | 説明文、本文、脚注               |
  | `label`                    | ボタンラベル、フォームフィールドのラベル    |
  | `helper`, `overline`       | キャプション、ヘルパーテキスト、カテゴリラベル |
</Accordion>

<Accordion title="形状 — Auth0Shapes">
  | **トークン**                                               | **用途**      |
  | ------------------------------------------------------ | ----------- |
  | `none`                                                 | 角丸なし        |
  | `extraSmall`, `small`, `medium`, `large`, `extraLarge` | 標準の角丸スケール   |
  | `full`                                                 | 完全な角丸 (ピル型) |
</Accordion>

<Accordion title="寸法 — Auth0Dimensions">
  スペーシングはデフォルトで `4 dp` グリッドに基づきます。スペーシングトークンには `Auth0Theme.dimensions.*` でアクセスします。

  | **トークン**     | **デフォルト** | **説明**                |
  | ------------ | --------- | --------------------- |
  | `spacingXxs` | 4 dp      | 密接に関連する要素間の最小間隔       |
  | `spacingXs`  | 8 dp      | グループ化された要素間の小さな間隔     |
  | `spacingSm`  | 12 dp     | 中程度の内側余白              |
  | `spacingMd`  | 16 dp     | 標準的なコンポーネントおよびコンテナの余白 |
  | `spacingLg`  | 24 dp     | 主要セクション用の大きな余白        |
  | `spacingXl`  | 32 dp     | 特大の余白                 |
  | `spacingXxl` | 48 dp     | さらに大きな余白              |
</Accordion>

<Accordion title="サイズ — Auth0Sizes">
  コンポーネントの寸法には `Auth0Theme.sizes.*` でアクセスします。

  | **トークン**              | **デフォルト** | **用途**                         |
  | --------------------- | --------- | ------------------------------ |
  | `buttonHeight`        | 56 dp     | すべての主要および副次アクションボタン            |
  | `inputHeight`         | 68 dp     | テキストおよび電話番号の入力フィールド            |
  | `otpFieldWidth`       | 52 dp     | 1 桁分の OTP 入力フィールドの幅            |
  | `otpFieldHeight`      | 60 dp     | 1 桁分の OTP 入力フィールドの高さ           |
  | `codeContainerHeight` | 56 dp     | リカバリーコード表示コンテナ                 |
  | `iconSmall`           | 16 dp     | 小型アイコン—シェブロン、情報インジケーター、チェックマーク |
  | `iconMedium`          | 24 dp     | 標準アイコン—認証方法の画像                 |
  | `iconLarge`           | 32 dp     | 大型アイコン—三点メニュー                  |
  | `padding`             | 16 dp     | デフォルトのコンポーネント余白                |
  | `paddingLarge`        | 24 dp     | 大きめのコンポーネント余白                  |
</Accordion>

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

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

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