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

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

Auth0 Universal Components for Android では、デザイントークンモデルを採用しています。色、タイポグラフィ、余白、角丸の半径、コンポーネントのサイズといった視覚的なプロパティは、それぞれレイアウトを変更することなくオーバーライドできるトークンとして定義されています。

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

​

テーマ設定の仕組み

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

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

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

​

設定不要

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

@Composable
fun MFASettingsScreen() {
    AuthenticatorSettingsComponent()
}

Auth0のデフォルトテーマを読み込むために、追加の設定は必要ありません。カスタムテーマが指定されていない場合は、Universal Componentsによって自動的に適用されます。

​

一部のトークンをオーバーライドする

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

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

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

​

ダークモードを強制する

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

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

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

​

完全なブランディングテーマを設定する

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

@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)
            )
        )
    )
}

​

独自のコンポーザブルでテーマトークンを読み取る

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

@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
            )
        }
    }
}

​

実行時にテーマを切り替える

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

@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)
    }
}

​

トークンリファレンス

カラー — 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	色付きのサーフェス上のテキスト

タイポグラフィ — Auth0Typography

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

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

形状 — Auth0Shapes

トークン	用途
none	角丸なし
extraSmall, small, medium, large, extraLarge	標準の角丸スケール
full	完全な角丸 (ピル型)

寸法 — 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	さらに大きな余白

サイズ — 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	大きめのコンポーネント余白

​

詳しく見る

Android SDK をインストールする

Android のプラットフォーム要件とインストール方法。

セルフサービスのアカウントセキュリティインターフェースを構築する

SDK を初期化し、トークンプロバイダーを Auth0 テナントに接続します。