Contents
Jetpack Composeにおけるテーマカスタマイズの基礎
Jetpack Composeのテーマカスタマイズは、Material Design 3対応APIを使用することで、アプリ全体の見た目を一貫して設計できます。2023年現在では、Dynamic Color APIやColorSchemeインターフェースが中心となり、以前の静的な設定に比べて柔軟性が格段に向上しています。Jetpack Compose公式ドキュメントを参考にしながら、最新APIの活用法を学びましょう。
MD3対応APIの概要
Material Design 3は、「カラースキーム」と「Typography」の2つの軸でテーマを定義します。これにより、Light/Darkモードだけでなく、デバイス設定に即した動的な色調整も可能になりました。以下の最新APIがJetpack Composeに統合されています。
ColorSchemeインターフェースDynamicColorsクラス（システムの動的カラーリングを実現）- テーマベースの
Typography定義
注意: 2026年以降のAPIは確定しておりません。最新情報は公式リファレンスをご確認ください。
Themeクラスの作成と定義方法
独自のテーマを構築するには、Material3Themeを継承したComposeThemeクラスを作成します。このクラス内で、カラースキームやフォントスタイルなどを定義し、アプリ全体に適用できるようにします。
ComposeThemeクラスの作成手順
- Material3Themeを継承:
@Composableで作成するテーマは必ずMaterial3Themeを継承します。 - ColorSchemeとTypographyの定義:
colorScheme()やtypography()などの関数で、独自の設定を作ります。 - アプリケーション全体への適用:
ComposeActivityなどでこのテーマを指定することで、全画面に反映されます。
|
1 2 3 4 5 6 7 8 9 |
@Composable fun MyTheme(content: @Composable () -> Unit) { Material3Theme( colorScheme = myColorScheme, typography = myTypography, content = content ) } |
ColorSchemeの設定手順
ColorSchemeはLight/Darkモードに対応するカラーパレットを定義するインターフェースです。Dynamic Colors APIを使うことで、ユーザーのデバイス設定に合わせて自動的に色が調整されるようになります。
Light/Darkモード対応のColorScheme比較表
| 項目 | Lightモード | Darkモード | 補足 |
|---|---|---|---|
| 背景色 | Color.White |
Color(0xFF121212) |
データの可読性を考慮 |
| 文字色 | Color.Black |
Color.White |
コントラスト比を確保 |
| プライマリ色 | Color(0xFF62579B) (青系) |
Color(0xFF8E84C1) (紫系) |
ブランド色と一致させる |
Dynamic Colors APIの活用方法
DynamicColorsクラスを使って、システム設定に合わせた自動的なカラーコンバートが可能になります。以下は動的処理を含んだコード例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
val isSystemInDarkMode = LocalConfiguration.current.isDarkMode val colorScheme = if (isSystemInDarkMode) { darkColorScheme( primary = Color(0xFF8E84C1), onPrimary = Color.White, background = Color(0xFF121212) ) } else { lightColorScheme( primary = Color(0xFF62579B), onPrimary = Color.White, background = Color.White ) } |
Typographyのカスタム方法
Typographyは、アプリケーション全体のフォントスタイルを統一するために使われます。Material3では、Typographyインターフェースを使って文字の大きさや太さなどを定義できます。
FontFamilyとTypographyの関係性
- FontFamily: フォントファイルから導出される基本スタイル（Light, Boldなど）
- Typography:
TextStyleを組み合わせて、ボディーや見出しなど用途ごとにスタイルを定義
カスタムFontFamilyの定義例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
val myFontFamily = FontFamily( Font(R.font.my_custom_light, FontWeight.Light), Font(R.font.my_custom_bold, FontWeight.Bold) ) val myTypography = Typography( bodyLarge = TextStyle( fontFamily = myFontFamily, fontSize = 16.sp, lineHeight = 24.sp ), titleMedium = TextStyle( fontFamily = myFontFamily, fontWeight = FontWeight.Bold, fontSize = 20.sp ) ) |
参考: カスタムフォントはGoogle Fontsなどから取得可能です。
Material3コンポーネントとの連携
Material3対応のコンポーネントはテーマ設定を自動で反映しますが、カスタムスタイルを上書きしたい場合もあります。この際にはmodifierやcolors()パラメータなどを使用する方法があります。
コンポーネントにテーマプロパティ伝播の仕組み
TextField,Buttonなどのコンポーネントは、テーマの色やフォントスタイルを自動で引き継ぎます。- これにより、一貫性のあるUIが構築できます。
|
1 2 3 4 5 6 |
OutlinedTextField( value = text, onValueChange = { text = it }, label = { Text("Enter text") } ) |
カスタムスタイルの上書き方法
テーマ設定を個別に調整したい場合は、colors()などを使ってスタイルを変更できます。
|
1 2 3 4 5 6 7 8 9 |
Button( onClick = { /* ... */ }, colors = ButtonDefaults.buttonColors( containerColor = Color(0xFFE57373) ) ) { Text("Custom Button") } |
動的テーマ切り替え実装例
ユーザーが手動でLight/Darkモードを切り替えたり、システム設定に合わせて自動切り替えを行えるようにするには、ViewModelとState APIを使用します。
State管理によるテーマ状態の制御手順
remember { mutableStateOf(false) }などで状態を管理します。- 画面再描画時に反映させるために
LaunchedEffectを使用します。
|
1 2 3 4 5 6 |
val isDarkMode = remember { mutableStateOf(LocalConfiguration.current.isDarkMode) } LaunchedEffect(Unit) { isDarkMode.value = LocalConfiguration.current.isDarkMode } |
システム設定と連携した自動切替実装
システムのLight/Darkモードに合わせてテーマを自動で変更するには、LocalConfigurationを使って現在の状態を取得します。
|
1 2 3 |
val isSystemInDarkMode = LocalConfiguration.current.isDarkMode val colorScheme = if (isSystemInDarkMode) darkColorScheme else lightColorScheme |
まとめ
Jetpack Composeでのテーマカスタマイズは、アプリのブランド性とアクセシビリティ向上に直結します。以下の手順を踏んで実装すれば、一貫したUI/UXが構築可能です。
- 独自Themeクラスを作成しアプリ全体に適用
- カラースキームとフォントスタイルをカスタマイズし、Material3コンポーネントに反映
- 動的な切り替え機能でユーザーの設定に合わせる
記事内のコードサンプルを参考に、実際にプロジェクトでテーマカスタマイズを試してみましょう。さらに詳しい情報はJetpack Compose公式ドキュメントをご確認ください。