Jetpack Composeでダークモード／ライトモードを切り替える基本方法

Jetpack Compose を使ったアプリで、ダークモード対応方法です。
基本の切り替え方法をシンプルにまとめました。

システムのダークモード／ライトモード状態を取得

Jetpack Compose には、現在のシステムがダークモードかどうかを判定する関数があります。

val isDark = isSystemInDarkTheme()

ライトテーマとダークテーマのカラースキームをMaterialThemeで切り替え

private val LightColorScheme = lightColorScheme(
    primary = Color(0xFF6200EE),
    background = Color.White,
    onBackground = Color.Black
)

private val DarkColorScheme = darkColorScheme(
    primary = Color(0xFFBB86FC),
    background = Color.Black,
    onBackground = Color.White
)

@Composable
fun MyAppTheme(
    useDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (useDarkTheme) DarkColorScheme else LightColorScheme

    MaterialTheme(
        colorScheme = colors,
        typography = Typography,
        content = content
    )
}

MainScreenのサンプルコード

@Composable
fun MainScreen() {
    // MaterialTheme の色を使って背景とテキスト色を取得
    val backgroundColor = MaterialTheme.colorScheme.background
    val textColor = MaterialTheme.colorScheme.onBackground

    Surface(
        modifier = Modifier
            .fillMaxSize()
            .background(backgroundColor),
        color = backgroundColor
    ) {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "Hello, Jetpack Compose!",
                color = textColor,
                style = MaterialTheme.typography.headlineMedium
            )
        }
    }
}

実行結果

ライトモード	ダークモード