Contents
MaterialThemeビルダーによる基本構造
Jetpack ComposeでMaterial3テーマを構築するには、MaterialThemeビルダーを使用します。このビルダーを使うことで、ColorScheme（カラーパレット）、Typography（フォントスタイル）、Shape（コンポーネントの角丸設定）などを一括で管理できます。
MaterialThemeの基本的な使い方
MaterialThemeは、アプリ全体に適用するテーマを定義するために使用します。以下に簡単なコード例を示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@Composable fun AppTheme(content: @Composable () -> Unit) { val colorScheme = lightColorScheme( primary = Color(0xFF6200EE), secondary = Color(0xFF3700B3), // 他のカラーも指定... ) MaterialTheme( colors = colorScheme, typography = Typography(), // **Typography()の無引数呼び出しが不適切な可能性あり** shapes = Shapes() ) { content() } } |
⚠️ 注意:
Typography()はパラメータを指定する必要がある場合があります。Material3の最新バージョンでは、Typography(MaterialTheme.typography)のように既存テーマを継承することも推奨されます。
デフォルトテーマの確認方法
Jetpack Composeプロジェクトを作成すると、Empty Compose Activityテンプレートによってデフォルトテーマが自動生成されます。このテーマはmaterial3ライブラリに基づいており、以下のように確認できます。
res/values/styles.xmlを開き、AppThemeの定義を確認- または
MainActivity.ktでMaterialThemeを使用している部分を探す
ブランドカラーを基にしたColorScheme作成
ブランドカラーを用いて、Material3のColorSchemeを作成する手順は以下の通りです。
カラーパレットの選定ポイント
- 主なブランドカラー（Primary Color）：最も目立たせる色として選びましょう
- 補助色（Secondary Color）：アクセントやアイコンなどに使用する色
- 背景色（Background / On Background）：ユーザーが見やすい色を設定
ColorScheme生成の手順
- Material Theme Builderツールを使用する
- Material Theme Builder でブランドカラーを入力
-
「Generate」ボタンを押すと、自動的にColorSchemeが作成されます
-
手動で定義する場合（例）
|
1 2 3 4 5 6 7 8 |
val colorScheme = lightColorScheme( primary = Color(0xFF6200EE), // ブランドカラーの主色 secondary = Color(0xFF3700B3), onPrimary = Color.White, background = Color.White, onBackground = Color.Black ) |
このように定義することで、アプリ全体に一貫したデザインを実現できます。
TypographyとShapeのカスタマイズ実践
Typography（フォントスタイル）やShape（コンポーネントの角丸設定）もテーマに組み込むことで、UIの個性を強調できます。
フォントサイズ・スタイルの調整
|
1 2 3 4 5 |
val typography = Typography( h1 = TextStyle(fontSize = 32.sp, fontWeight = FontWeight.Bold), body1 = TextStyle(fontSize = 16.sp, fontFamily = FontFamily.SansSerif) ) |
このようにTypographyをカスタマイズすることで、見出しや本文のスタイルを自由に設定できます。
角丸設定の最適化
|
1 2 3 4 5 6 |
val shapes = Shapes( small = RoundedCornerShape(8.dp), medium = RoundedCornerShape(12.dp), large = RoundedCornerShape(16.dp) ) |
コンポーネントごとに角丸を調整することで、デザインの一貫性と親しみやすさを高められます。
ダークモード対応の実装方法
ダークモードに対応することで、ユーザーがどんな環境でも快適にアプリを使用できるようになります。
Light/Darkモード切り替えの仕組み
- システム設定に基づく自動切り替え：
LocalContext.current.resources.configuration.uiModeで判定 - 手動での切り替え：ボタンなどを使って状態を管理
テーマの動的変更コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@Composable fun AppTheme(isDarkMode: Boolean, content: @Composable () -> Unit) { val colorScheme = if (isDarkMode) { darkColorScheme( primary = Color(0xFFBB86FC), secondary = Color(0xFF3700B3) ) } else { lightColorScheme(primary = Color(0xFF6200EE), secondary = Color(0xFF3700B3)) } MaterialTheme( colors = colorScheme, typography = Typography(), shapes = Shapes() ) { content() } } |
⚠️ 注意:
rememberSaveableを使用して状態を永続化する例が必要です。以下のコードを参考に実装してください。
|
1 2 |
val isDarkMode = rememberSaveable { mutableStateOf(false) } |
カスタムテーマのエクスポートと活用
作成したテーマは、プロジェクト全体や他のコンポーネントで再利用できるように整理することが重要です。
設定コードの再利用方法
Theme.ktファイルを作成し、以下のように定義
|
1 2 3 4 5 6 |
object AppTheme { val colors = lightColorScheme(...) val typography = Typography(...) val shapes = Shapes(...) } |
MainActivity.kt内でこのテーマを呼び出すように設定
プロジェクト全体への適用手順
| 項目 | 値 | 補足 |
|---|---|---|
| 共通ファイルの作成 | Theme.ktをuiディレクトリに配置 |
他のコンポーネントが参照しやすい |
| 依存関係の明確化 | import com.example.app.ui.Theme.* |
モジュール間の依存関係管理 |
| エクスポート機能の活用 | Material Theme Builderツールで生成したコードを直接プロジェクトに貼り付け | 最新のカラー・フォント情報を反映 |
まとめ
Jetpack ComposeでMaterial3テーマをカスタマイズする際には、以下の手順を意識してください。
MaterialThemeビルダーで基本構造を定義- ブランドカラーを基にColorSchemeを作成
- TypographyとShapeの調整でUIの個性を表現
- ダークモードに対応する仕組みを実装
- 作成したテーマをプロジェクト全体で再利用
記事内で紹介したステップを踏むことで、初心者でも独自のブランドイメージに合わせたMaterial3テーマを作成できます。サンプルコードをプロジェクトに適用し、あなたのオリジナルテーマを試してみてください。