Jetpack Compose のテーマ入門：MaterialTheme・Dynamic Color・カスタム実装ガイド

2026年7月3日

Contents

1 Jetpack Compose のテーマ基礎と MaterialTheme の構造
- 1.1 ColorScheme・Typography・Shapes の役割とデフォルト設定
2 Material You（動的カラー）の概要と利用条件
- 2.1 動的カラーを取得する API と安全な呼び出し方
  - 2.1.1 使用例（安全に呼び出すラッパー）
- 2.2 デバイス別の挙動とフォールバック戦略
3 カスタムテーマの作成と拡張テクニック
- 3.1 独自 ColorPalette の定義と拡張関数による利用例
  - 3.1.1 カスタムカラーの利用例
- 3.2 Typography と Shapes の上書き方法
4 マルチモジュールプロジェクトでのテーマ一元管理
- 4.1 Theme.kt の構成例と core-ui モジュールへの切り出し方
  - 4.1.1 Gradle 設定例（マルチモジュール構成）
5 ランタイムでのテーマ切替とパフォーマンス最適化
- 5.1 State 管理によるテーマ選択の永続化
- 5.2 テーマオブジェクトの remember キャッシュとプレビュー活用
  - 5.2.1 Compose Preview と Palette Tool の併用
6 まとめ

スポンサードリンク

Jetpack Compose のテーマ基礎と MaterialTheme の構造

Compose では UI コンポーネントが内部で MaterialTheme が提供するオブジェクトを参照して描画されます。これらを適切に設定すれば、個々のビューを書き換えることなく全体の外観を一括変更でき、保守性とデザインの一貫性が大幅に向上します。

ColorScheme・Typography・Shapes の役割とデフォルト設定

ColorScheme はアプリ全体で使用する色セット、Typography は文字スタイル、Shapes は角丸やボーダー形状を定義します。以下のコードは Material3 用の MaterialTheme を最小構成でラップした例です。

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -&gt; Unit
) {
    // デフォルトの Light / Dark カラースキームを取得
    val colorScheme = if (darkTheme) darkColorScheme() else lightColorScheme()

    MaterialTheme(
        colorScheme = colorScheme,   // 色セット
        typography = Typography(),   // 文字スタイル（デフォルト）
        shapes = Shapes()            // 形状（デフォルト）
    ) {
        content()
    }
}

@Composable

fun AppTheme(

darkTheme: Boolean = isSystemInDarkTheme(),

content: @Composable () -> Unit

) {

// デフォルトの Light / Dark カラースキームを取得

val colorScheme = if (darkTheme) darkColorScheme() else lightColorScheme()

MaterialTheme(

colorScheme = colorScheme, // 色セット

typography = Typography(), // 文字スタイル（デフォルト）

shapes = Shapes() // 形状（デフォルト）

) {

content()

}

ポイント：MaterialTheme の各パラメータは省略可能です。省略した場合は material3 ライブラリが提供する標準の Light / Dark スキームが自動適用されます。
ベネフィット：カラーや文字・形状を上書きしたいときだけ該当オブジェクトを差し替えれば、他のコンポーネントは何も変更せずに新しいテーマを反映します。

Material You（動的カラー）の概要と利用条件

Material You は Android 12（API 31）以降で導入されたシステムレベルの配色機能です。端末が壁紙やアクセントカラーから自動生成した ColorScheme を取得でき、アプリは「OS のデザイン言語」に合わせて自然に外観を変化させられます。

動的カラーを取得する API と安全な呼び出し方

Compose が提供している関数は次の 2 つです。どちらも Context が必要ですが、API レベルが 31 未満の場合はデフォルトスキームを返すように設計されています。

関数	説明
`dynamicLightColorScheme(context)`	Android 12+ のライトモード用動的カラー。API < 31 では `lightColorScheme()` を返す
`dynamicDarkColorScheme(context)`	Android 12+ のダークモード用動的カラー。API < 31 では `darkColorScheme()` を返す

使用例（安全に呼び出すラッパー）

@Composable
fun DynamicAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -&gt; Unit
) {
    // Android12 以上かどうかをビルド時に判定
    val useDynamic = Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.S

    val colorScheme = when {
        useDynamic &amp;&amp; darkTheme -&gt; dynamicDarkColorScheme(LocalContext.current)
        useDynamic &amp;&amp; !darkTheme -&gt; dynamicLightColorScheme(LocalContext.current)
        darkTheme -&gt; darkColorScheme()
        else -&gt; lightColorScheme()
    }

    MaterialTheme(colorScheme = colorScheme, typography = Typography(), shapes = Shapes()) {
        content()
    }
}

@Composable

fun DynamicAppTheme(

darkTheme: Boolean = isSystemInDarkTheme(),

content: @Composable () -> Unit

) {

// Android12 以上かどうかをビルド時に判定

val useDynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S

val colorScheme = when {

useDynamic && darkTheme -> dynamicDarkColorScheme(LocalContext.current)

useDynamic && !darkTheme -> dynamicLightColorScheme(LocalContext.current)

darkTheme -> darkColorScheme()

else -> lightColorScheme()

}

MaterialTheme(colorScheme = colorScheme, typography = Typography(), shapes = Shapes()) {

content()

}

ポイント：dynamicColor というパラメータは MaterialTheme に存在しません。動的カラーの有無は自前で Boolean 判定してから上記関数を呼び出す形が正しい実装です。

デバイス別の挙動とフォールバック戦略

Android 12（API 31）以降：dynamic*ColorScheme がシステム生成カラーを返し、壁紙変更に即座に追従します。
Android 11 以下：同関数は内部で lightColorScheme()／darkColorScheme() を返すため、アプリ側で例外処理を書く必要はありません。
フォールバック実装のベストプラクティス：上記ラッパーのように「API 判定 → 動的カラー取得 → デフォルト」のフローを一箇所に集約すれば、各画面で同様のコードを書く手間が省けます。

カスタムテーマの作成と拡張テクニック

標準の ColorScheme だけではブランド固有の配色や独自トーンを表現しきれないケースがあります。そこで データクラス化したカラーパレット と MaterialTheme の拡張関数 を組み合わせる手法をご紹介します。

独自 ColorPalette の定義と拡張関数による利用例

まずはアプリ独自のカラーセットを data class で表現し、暗色・明色それぞれにインスタンスを用意します。次に MaterialTheme に拡張プロパティを追加することで、Compose の内部から簡潔に参照できます。

// ui/theme/CustomPalette.kt
package com.example.coreui.theme

import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.material3.MaterialTheme
import androidx.compose.foundation.isSystemInDarkTheme

data class CustomColors(
    val brandPrimary: Color,
    val brandSecondary: Color,
    val errorContainer: Color
)

private val LightPalette = CustomColors(
    brandPrimary   = Color(0xFF0061A4),
    brandSecondary = Color(0xFF00BFA5),
    errorContainer = Color(0xFFFFEBEE)
)

private val DarkPalette = CustomColors(
    brandPrimary   = Color(0xFF90CAF9),
    brandSecondary = Color(0xFF80CBC4),
    errorContainer = Color(0xFFCF6679)
)

// MaterialTheme に拡張プロパティを追加
val MaterialTheme.customColors: CustomColors
    @Composable get() =
        if (isSystemInDarkTheme()) DarkPalette else LightPalette

// ui/theme/CustomPalette.kt

package com.example.coreui.theme

import androidx.compose.runtime.Composable

import androidx.compose.ui.graphics.Color

import androidx.compose.material3.MaterialTheme

import androidx.compose.foundation.isSystemInDarkTheme

data class CustomColors(

val brandPrimary: Color,

val brandSecondary: Color,

val errorContainer: Color

)

private val LightPalette = CustomColors(

brandPrimary = Color(0xFF0061A4),

brandSecondary = Color(0xFF00BFA5),

errorContainer = Color(0xFFFFEBEE)

)

private val DarkPalette = CustomColors(

brandPrimary = Color(0xFF90CAF9),

brandSecondary = Color(0xFF80CBC4),

errorContainer = Color(0xFFCF6679)

)

// MaterialTheme に拡張プロパティを追加

val MaterialTheme.customColors: CustomColors

@Composable get() =

if (isSystemInDarkTheme()) DarkPalette else LightPalette

カスタムカラーの利用例

@Composable
fun BrandButton(
    onClick: () -&gt; Unit,
    text: String
) {
    Button(
        onClick = onClick,
        colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.customColors.brandPrimary)
    ) {
        Text(text, color = Color.White)
    }
}

@Composable

fun BrandButton(

onClick: () -> Unit,

text: String

) {

Button(

onClick = onClick,

colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.customColors.brandPrimary)

) {

Text(text, color = Color.White)

}

ポイント：MaterialTheme.customColors は @Composable プロパティとして提供されるため、テーマ切替（ライト／ダーク）に自動追従します。コードベースが一元化され、カラー変更時の影響範囲を最小限に抑えられます。

Typography と Shapes の上書き方法

文字スタイルと形状も同様にプロジェクト全体で統一したい場合は、Typography と Shapes のインスタンスを自前で作成し、Theme.kt へ注入します。

// ui/theme/Type.kt
private val AppFontFamily = FontFamily(
    Font(R.font.roboto_regular, FontWeight.Normal),
    Font(R.font.roboto_medium,   FontWeight.Medium),
    Font(R.font.roboto_bold,     FontWeight.Bold)
)

val AppTypography = Typography(
    displayLarge = TextStyle(
        fontFamily = AppFontFamily,
        fontWeight = FontWeight.Bold,
        fontSize = 30.sp
    ),
    bodyMedium = TextStyle(
        fontFamily = AppFontFamily,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    )
    // 必要に応じて他のスタイルも上書き
)

// ui/theme/Shape.kt
val AppShapes = Shapes(
    small  = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(8.dp),
    large  = RoundedCornerShape(12.dp)
)

// ui/theme/Type.kt

private val AppFontFamily = FontFamily(

Font(R.font.roboto_regular, FontWeight.Normal),

Font(R.font.roboto_medium, FontWeight.Medium),

Font(R.font.roboto_bold, FontWeight.Bold)

)

val AppTypography = Typography(

displayLarge = TextStyle(

fontFamily = AppFontFamily,

fontWeight = FontWeight.Bold,

fontSize = 30.sp

bodyMedium = TextStyle(

fontFamily = AppFontFamily,

fontWeight = FontWeight.Normal,

fontSize = 16.sp

)

// 必要に応じて他のスタイルも上書き

)

// ui/theme/Shape.kt

val AppShapes = Shapes(

small = RoundedCornerShape(4.dp),

medium = RoundedCornerShape(8.dp),

large = RoundedCornerShape(12.dp)

)

Theme.kt に組み込むだけで、全コンポーネントが新しい書体・形状を自動的に使用します。

マルチモジュールプロジェクトでのテーマ一元管理

大規模アプリでは UI 関連コードを core-ui といった共通ライブラリに集約し、各 Feature モジュールから参照させる構成が推奨されます。これによりテーマ変更時の影響範囲が限定され、ビルド時間や依存関係の管理もシンプルになります。

Theme.kt の構成例と core-ui モジュールへの切り出し方

以下は core-ui ライブラリ内に配置した Theme.kt の実装例です。動的カラー対応、カスタムパレット、Typography・Shapes のすべてを一箇所で定義しています。

// core-ui/src/main/kotlin/com/example/coreui/theme/Theme.kt
package com.example.coreui.theme

import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -&gt; Unit
) {
    // Android12+ かどうかで動的カラー取得を切り替える
    val useDynamic = Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.S

    val colorScheme = when {
        useDynamic &amp;&amp; darkTheme -&gt; dynamicDarkColorScheme(LocalContext.current)
        useDynamic &amp;&amp; !darkTheme -&gt; dynamicLightColorScheme(LocalContext.current)
        darkTheme -&gt; darkColorScheme()
        else -&gt; lightColorScheme()
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography   = AppTypography,
        shapes       = AppShapes
    ) {
        content()
    }
}

// core-ui/src/main/kotlin/com/example/coreui/theme/Theme.kt

package com.example.coreui.theme

import android.os.Build

import androidx.compose.foundation.isSystemInDarkTheme

import androidx.compose.runtime.Composable

import androidx.compose.ui.platform.LocalContext

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.dynamicDarkColorScheme

import androidx.compose.material3.dynamicLightColorScheme

import androidx.compose.material3.darkColorScheme

import androidx.compose.material3.lightColorScheme

@Composable

fun AppTheme(

darkTheme: Boolean = isSystemInDarkTheme(),

content: @Composable () -> Unit

) {

// Android12+ かどうかで動的カラー取得を切り替える

val useDynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S

val colorScheme = when {

useDynamic && darkTheme -> dynamicDarkColorScheme(LocalContext.current)

useDynamic && !darkTheme -> dynamicLightColorScheme(LocalContext.current)

darkTheme -> darkColorScheme()

else -> lightColorScheme()

}

MaterialTheme(

colorScheme = colorScheme,

typography = AppTypography,

shapes = AppShapes

) {

content()

}

Gradle 設定例（マルチモジュール構成）

// settings.gradle.kts
include(&quot;:app&quot;, &quot;:core-ui&quot;, &quot;:feature-login&quot;, &quot;:feature-home&quot;)

// core-ui/build.gradle.kts
plugins {
    id(&quot;com.android.library&quot;)
    kotlin(&quot;android&quot;)
}

android {
    namespace = &quot;com.example.coreui&quot;
    compileSdk = 34

    defaultConfig {
        minSdk = 21
    }
}

dependencies {
    implementation(libs.compose.ui)
    implementation(libs.compose.material3)
}

// settings.gradle.kts

include(":app", ":core-ui", ":feature-login", ":feature-home")

// core-ui/build.gradle.kts

plugins {

id("com.android.library")

kotlin("android")

}

android {

namespace = "com.example.coreui"

compileSdk = 34

defaultConfig {

minSdk = 21

}

dependencies {

implementation(libs.compose.ui)

implementation(libs.compose.material3)

}

各 Feature モジュールは implementation(project(":core-ui")) を追加すれば、AppTheme とカスタムカラーを即座に利用できます。

ランタイムでのテーマ切替とパフォーマンス最適化

ユーザーがライト／ダークや独自カラーパレットを選択できるようにするには、State 管理 と リコンポジション削減 が重要です。以下では ViewModel と DataStore を組み合わせた永続化手法と、テーマオブジェクトの remember キャッシュによる高速描画テクニックを紹介します。

State 管理によるテーマ選択の永続化

DataStore に保存した設定値を ViewModel が Flow で購読し、Compose 側では collectAsStateWithLifecycle と rememberSaveable を併用して UI に反映させます。

// ui/theme/ThemePreference.kt
enum class ThemeMode { LIGHT, DARK, SYSTEM }

@Composable
fun rememberAppTheme(
    viewModel: ThemeViewModel = androidx.lifecycle.viewmodel.compose.viewModel()
): Pair&lt;ThemeMode, (ThemeMode) -&gt; Unit&gt; {
    val mode by viewModel.themeMode.collectAsStateWithLifecycle()
    val setMode: (ThemeMode) -&gt; Unit = { viewModel.setThemeMode(it) }
    // rememberSaveable で再起動後も保持
    val current = rememberSaveable { mutableStateOf(mode) }
    return current.value to setMode
}

// ui/theme/ThemePreference.kt

enum class ThemeMode { LIGHT, DARK, SYSTEM }

@Composable

fun rememberAppTheme(

viewModel: ThemeViewModel = androidx.lifecycle.viewmodel.compose.viewModel()

): Pair<ThemeMode, (ThemeMode) -> Unit> {

val mode by viewModel.themeMode.collectAsStateWithLifecycle()

val setMode: (ThemeMode) -> Unit = { viewModel.setThemeMode(it) }

// rememberSaveable で再起動後も保持

val current = rememberSaveable { mutableStateOf(mode) }

return current.value to setMode

}

// ViewModel 側
class ThemeViewModel(
    private val dataStore: DataStore&lt;Preferences&gt;
) : ViewModel() {

    private val _themeMode = MutableStateFlow(ThemeMode.SYSTEM)
    val themeMode: StateFlow&lt;ThemeMode&gt; = _themeMode.asStateFlow()

    init { restoreFromDataStore() }

    private fun restoreFromDataStore() {
        viewModelScope.launch {
            dataStore.data.map { prefs -&gt;
                ThemeMode.valueOf(prefs[KEY_THEME] ?: ThemeMode.SYSTEM.name)
            }.collect { _themeMode.value = it }
        }
    }

    fun setThemeMode(mode: ThemeMode) {
        viewModelScope.launch {
            dataStore.edit { it[KEY_THEME] = mode.name }
            _themeMode.value = mode
        }
    }
}

// ViewModel 側

class ThemeViewModel(

private val dataStore: DataStore<Preferences>

) : ViewModel() {

private val _themeMode = MutableStateFlow(ThemeMode.SYSTEM)

val themeMode: StateFlow<ThemeMode> = _themeMode.asStateFlow()

init { restoreFromDataStore() }

private fun restoreFromDataStore() {

viewModelScope.launch {

dataStore.data.map { prefs ->

ThemeMode.valueOf(prefs[KEY_THEME] ?: ThemeMode.SYSTEM.name)

}.collect { _themeMode.value = it }

}

fun setThemeMode(mode: ThemeMode) {

viewModelScope.launch {

dataStore.edit { it[KEY_THEME] = mode.name }

_themeMode.value = mode

}

@Composable
fun MyApp() {
    val (mode, setMode) = rememberAppTheme()
    val darkTheme = when (mode) {
        ThemeMode.LIGHT  -&gt; false
        ThemeMode.DARK   -&gt; true
        ThemeMode.SYSTEM -&gt; isSystemInDarkTheme()
    }

    AppTheme(darkTheme = darkTheme) {
        // アプリ全体の NavHost などを配置
    }
}

@Composable

fun MyApp() {

val (mode, setMode) = rememberAppTheme()

val darkTheme = when (mode) {

ThemeMode.LIGHT -> false

ThemeMode.DARK -> true

ThemeMode.SYSTEM -> isSystemInDarkTheme()

}

AppTheme(darkTheme = darkTheme) {

// アプリ全体の NavHost などを配置

}

ポイント：rememberSaveable によりプロセス再起動後も選択状態が保持され、ユーザーエクスペリエンスが向上します。

テーマオブジェクトの `remember` キャッシュとプレビュー活用

テーマオブジェクトは不変（immutable）であることが理想です。colorScheme の生成コストを削減するために、darkTheme・dynamicColor が変化した時だけ再計算するよう remember でラップします。

@Composable
fun AppTheme(
    darkTheme: Boolean,
    content: @Composable () -&gt; Unit
) {
    val useDynamic = Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.S

    // 色セットのキャッシュ
    val colorScheme = remember(darkTheme, useDynamic) {
        when {
            useDynamic &amp;&amp; darkTheme -&gt; dynamicDarkColorScheme(LocalContext.current)
            useDynamic &amp;&amp; !darkTheme -&gt; dynamicLightColorScheme(LocalContext.current)
            darkTheme -&gt; darkColorScheme()
            else -&gt; lightColorScheme()
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography   = AppTypography, // immutable なので remember 不要
        shapes       = AppShapes
    ) {
        content()
    }
}

@Composable

fun AppTheme(

darkTheme: Boolean,

content: @Composable () -> Unit

) {

val useDynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S

// 色セットのキャッシュ

val colorScheme = remember(darkTheme, useDynamic) {

when {

useDynamic && darkTheme -> dynamicDarkColorScheme(LocalContext.current)

useDynamic && !darkTheme -> dynamicLightColorScheme(LocalContext.current)

darkTheme -> darkColorScheme()

else -> lightColorScheme()

}

MaterialTheme(

colorScheme = colorScheme,

typography = AppTypography, // immutable なので remember 不要

shapes = AppShapes

) {

content()

}

Compose Preview と Palette Tool の併用

Preview：@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) / NO を付与すれば、ライトとダークの両方でテーマがどのように見えるか即座に確認できます。
Palette Tool：Android Studio の「Palette」パネルは現在適用されている ColorScheme の色を一覧表示し、カスタムカラーとの相性を視覚的に評価できる便利なツールです。
ベネフィット：開発中に実機やエミュレータでビルド・起動する手間が減り、デザインの微調整サイクルが大幅に短縮されます。

まとめ

テーマの核は ColorScheme·Typography·Shapes。MaterialTheme に集約すれば全画面で一貫した UI が実現できます。
Material You（動的カラー） は Android 12+ のみ有効で、dynamic*ColorScheme 系 API を安全にラップして使用します。dynamicColor パラメータは存在しません。
カスタムパレットは data class と拡張関数で管理すると型安全かつ再利用性が向上します。
マルチモジュール構成では core-ui にテーマコードを集約し、各 Feature が implementation(project(":core-ui")) だけで共通デザインを継承できます。
ランタイム切替は ViewModel + DataStore + rememberSaveable の組み合わせが推奨され、永続化と即時反映が可能です。
パフォーマンス最適化は remember キャッシュと Android Studio の Palette/Preview 活用で実現し、不要なリコンポジションを防ぎます。

本稿のコードや最新サンプルは以下のリポジトリで確認できます。
🔗 https://github.com/yourname/compose-theme-sample

ぜひ自プロジェクトに取り入れ、保守性とデザイン品質の高い Compose アプリを構築してください。

スポンサードリンク

-JetpackCompose

comment コメントをキャンセル

: JetpackCompose

Jetpack Compose アニメーション入門: ステップバイステップガイド

Jetpack ComposeでUIにアニメーションを追加する方法は、ユーザー体験を劇的に向上させる手段です。この記事では、宣言型UIとアニメーションの関係性やTransition APIによる実装法などをステップバイステップで解説します。

: JetpackCompose

Jetpack Compose学習ロードマップ2026 | 実務導入ガイド

2026年のJetpack Compose学習ロードマップと実務導入ガイド。30日集中プラン、KMM連携、State Managementなど最新技術を網羅した解説。

: JetpackCompose

Jetpack Composeでアニメーションを実装する方法 | 状態管理と宣言型UIの関係

Jetpack Composeでアニメーションを構築する際の状態管理（State Management）と宣言型UIの関係性、AnimatedVisibility・Transition API・Fade/Slideアニメーション・Animatableによるタイムライン制御など、実装例をステップバイステップで解説。

: JetpackCompose

Jetpack Compose 入門 2025年最新バージョン

Jetpack Composeの導入手順、TextField/Buttonの2025バージョン対応API、State管理やConstraintLayoutとの連携技法、RoomPersistence統合例を解説。

: JetpackCompose

Jetpack Compose vs ViewBinding: Android UI Design Comparison

Explore the differences between Jetpack Compose (declarative UI) and ViewBinding (imperative UI) in Android development. Covers performance, state management, testing efficiency, and migration strategies.

FastAPI デプロイとクラウドコスト徹底解説 – 2026年最新版

Flask vs FastAPI 比較 2026 – 型ヒント・非同期・運用コスト徹底解説

Jetpack Compose のテーマ入門：MaterialTheme・Dynamic Color・カスタム実装ガイド

Jetpack Compose のテーマ基礎と MaterialTheme の構造

ColorScheme・Typography・Shapes の役割とデフォルト設定

Material You（動的カラー）の概要と利用条件

動的カラーを取得する API と安全な呼び出し方

使用例（安全に呼び出すラッパー）

デバイス別の挙動とフォールバック戦略

カスタムテーマの作成と拡張テクニック

独自 ColorPalette の定義と拡張関数による利用例

カスタムカラーの利用例

Typography と Shapes の上書き方法

マルチモジュールプロジェクトでのテーマ一元管理

Theme.kt の構成例と core-ui モジュールへの切り出し方

Gradle 設定例（マルチモジュール構成）

ランタイムでのテーマ切替とパフォーマンス最適化

State 管理によるテーマ選択の永続化

テーマオブジェクトの remember キャッシュとプレビュー活用

Compose Preview と Palette Tool の併用

まとめ

テーマオブジェクトの `remember` キャッシュとプレビュー活用