Jetpack Compose Material3テーマカスタムガイド | 初心者向け

2026年6月30日

Contents

1 Jetpack Compose Material3 カスタムテーマ使い方｜初心者向け実践ガイド
2 Material3テーマの基本構造とコンポーネントとの関係性
- 2.1 主なテーマ構造の関係性
3 ColorSchemeのカスタマイズ方法
- 3.1 プライマリカラーアクセントの調整
  - 3.1.1 コード例：カスタムColorSchemeの定義
- 3.2 セカンダリカラーとアクセントカラーの組み合わせ
4 Typographyの設定手順
- 4.1 フォントファミリの指定方法
  - 4.1.1 コード例：カスタムTypographyの作成
5 Shapeのカスタム例
- 5.1 CornerRadiiのグローバル設定
  - 5.1.1 コード例：カスタムShapeの定義
6 ダークモード対応時のテーマ切り替えロジック
- 6.1 システム設定による自動切り替え
- 6.2 手動スイッチでのテーマ切替
7 Firebase Remote Configによる動的テーマ変更
- 7.1 リモート設定値の取得フロー
- 7.2 実行時テーマ適用の仕組み

スポンサードリンク

Jetpack Compose Material3 カスタムテーマ使い方｜初心者向け実践ガイド

Jetpack ComposeでMaterial3のカスタムテーマを設定する際、ColorScheme・Typography・Shapeの調整がUIデザインの核心です。特に新規プロジェクトではテーマの統一感がUXに大きく影響を与えるため、正しい手順でカスタマイズすることが重要です。本記事ではステップバイステップで解説し、実際のリソースへの確認方法も含めて学習します。

Material3テーマの基本構造とコンポーネントとの関係性

Material3テーマは「**ColorScheme（カラーパターン）」「Typography（タイポグラフィ）」「Shape（シェイプ）」の3つのサブシステムで構成されます。これらをカスタマイズすることで、テキスト・ボタン・カードなどすべてのコンポーネントに統一されたデザインルールが適用されます。

主なテーマ構造の関係性

サブシステム	適用対象コンポーネント	影響範囲例
ColorScheme	ボタン、アイコン、背景色	`Button`や`Card`のスタイル変更
Typography	タイトル・ボディ文字	`Text`のフォントサイズ・太さの統一
Shape	コンポーネントの角丸	`OutlinedButton`や`TextField`の角設定

Material3テーマはMaterialThemeクラスを拡張し、アプリ全体で一貫したUIを構築できます。詳細な構造については公式ドキュメントをご参照ください。

ColorSchemeのカスタマイズ方法

Material3ではColorSchemeを拡張し、Primary（プライマリ）・Secondary（セカンダリ）・Accent（アクセント）などの色を定義します。これを設定することで、アプリ全体で一貫したカラーテーマが適用されます。

プライマリカラーアクセントの調整

ColorSchemeの作成: MaterialThemeにカスタムカラーパレットを注入します。
Material Theme Builder使用: 公式ツールでカラーパターンを生成し、Composeコードとして出力できます。

コード例：カスタムColorSchemeの定義

val CustomColorScheme = lightColorScheme(
    primary = Color(0xFF62579B),
    secondary = Color(0xFFA8C0F1),
    background = Color(0xFFF5F5F5)
)

val CustomColorScheme = lightColorScheme(

primary = Color(0xFF62579B),

secondary = Color(0xFFA8C0F1),

background = Color(0xFFF5F5F5)

)

セカンダリカラーとアクセントカラーの組み合わせ

色役割	推奨用途	使用例
Primary	メインアクション（例：ボタン）	`Button`の背景色
Secondary	サポートアクション（例：アイコン）	`IconButton`のアイコン色
Accent	補足情報（例：エラーメッセージ）	`Text`の赤系文字

MaterialTheme Builderでカラーパレットを作成すると、自動生成されるコードはプロジェクトに即した最適な組み合わせになります。

Typographyの設定手順

TypographyカスタムではTypographyを拡張し、フォントファミリ・テキストスタイル（太字・斜体など）を一括管理します。Google Fontsとの連携も可能です。

フォントファミリの指定方法

Google Fonts導入: build.gradleに依存関係を追加します。

implementation 'com.google.android.material:material:1.9.0'

1 2	implementation 'com.google.android.material:material:1.9.0'

Typography定義: Typographyインターフェースを拡張し、フォントファミリ名を設定します。

コード例：カスタムTypographyの作成

val CustomTypography = Typography(
    h6 = TextStyle(fontSize = 24.sp, fontFamily = FontFamily.SansSerif),
    body1 = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Medium)
)

val CustomTypography = Typography(

h6 = TextStyle(fontSize = 24.sp, fontFamily = FontFamily.SansSerif),

body1 = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Medium)

)

Shapeのカスタム例

ShapeカスタマイズではShapesを拡張し、CornerRadii（角丸）のグローバル設定やコンポーネントごとの形状差分を指定できます。

CornerRadiiのグローバル設定

スタイル	角丸値	適用範囲
`large`	16dp	コンポーネント全体（例：カード）
`medium`	8dp	ボタン・アイコンなど

コード例：カスタムShapeの定義

val CustomShapes = Shapes(
    small = CornerSize(4.dp),
    medium = CornerSize(8.dp),
    large = CornerSize(16.dp)
)

val CustomShapes = Shapes(

small = CornerSize(4.dp),

medium = CornerSize(8.dp),

large = CornerSize(16.dp)

)

ダークモード対応時のテーマ切り替えロジック

Material3ではisSystemInDarkTheme()を使用し、システム設定に基づく自動切り替えや手動スイッチでのテーマ切替が可能です。

システム設定による自動切り替え

val darkMode = remember { mutableStateOf(isSystemInDarkTheme()) }
LaunchedEffect(Unit) {
    LaunchedEffect(LocalDarkMode.current) {
        darkMode.value = LocalDarkMode.current
    }
}

val darkMode = remember { mutableStateOf(isSystemInDarkTheme()) }

LaunchedEffect(Unit) {

LaunchedEffect(LocalDarkMode.current) {

darkMode.value = LocalDarkMode.current

}

手動スイッチでのテーマ切替

Switchコンポーネントでユーザーが明暗モードを切り替え可能にします。
Themeクラス内でdarkMode.valueに基づいてColorSchemeを切り替えます。

Firebase Remote Configによる動的テーマ変更

Firebase Remote Configを使用すると、リモートからテーマ設定値を取得し、実行時にUIスタイルを変更できます。これによりA/Bテストやバージョン別UIのカスタマイズが可能です。

リモート設定値の取得フロー

Firebaseコンソールでキーを作成: theme_colorなどテーマ情報を管理。
アプリ内での読み込みとキャッシュ制御:

val remoteConfig = FirebaseRemoteConfig.getInstance()
remoteConfig.fetchAndActivate().addOnCompleteListener { task -&gt;
    if (task.isSuccessful) {
        val colorHex = remoteConfig.getString(&quot;theme_color&quot;)
        // ColorSchemeを再生成して反映
    }
}

val remoteConfig = FirebaseRemoteConfig.getInstance()

remoteConfig.fetchAndActivate().addOnCompleteListener { task ->

if (task.isSuccessful) {

val colorHex = remoteConfig.getString("theme_color")

// ColorSchemeを再生成して反映

}

実行時テーマ適用の仕組み

読み込んだ設定値からColorSchemeやTypographyを動的に変更。
エラーハンドリングはtry-catchで実施し、デフォルトテーマにフォールバック。

Material3テーマカスタムサンプルコードのリポジトリ
本記事での実装例が確認できるリポジトリを公開しています。詳細はこちらをご覧ください。（※このリンクは仮想URLです）