1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Jetpack Compose】Material3でテーマカラーを変更する際に陥りがちなミス

Posted at

概要

Material3で新しくプロジェクトを立ち上げた際、テーマカラーを変えようとしてLightColorSchemeのフィールドをいじるのですが、それだけいじっても反映されないことがあります。スクリーンショット 2022-09-12 23.04.24.png

コードの変更箇所

test.kt
private val LightColorScheme = lightColorScheme(
    primary = Color.Blue,
    secondary = PurpleGrey40,
    tertiary = Pink40

    /* Other default colors to override
    background = Color(0xFFFFFBFE),
    surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
    onSecondary = Color.White,
    onTertiary = Color.White,
    onBackground = Color(0xFF1C1B1F),
    onSurface = Color(0xFF1C1B1F),
    */
)

ためしにLightColorSchemeのprimaryをColor.Blueにしてみましたが、アプリをビルドした際にテーマカラーの変更が反映されません。
何色にしても、secondaryやbackgroundをいじっても変わりません

原因

それもそのはず、デフォルトで適用されているのがLightColorSchemeではありませんでした。

プロジェクトを生成した時に自動的に追加されるComposabke関数があります。今回はTestという名前で作ったので、TestThemeという関数ができます。

test.kt
@Composable
fun TestTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            (view.context as Activity).window.statusBarColor = colorScheme.primary.toArgb()
            ViewCompat.getWindowInsetsController(view)?.isAppearanceLightStatusBars = darkTheme
        }
    }

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

追加された時には上記のコードなのですが、APIレベルが31以上の時に、dynamicDarkColorSchemeが適用されるようになっているので、ビルドする端末のAPIレベルしだいでは、LightColorSchemeが適用されません。

        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

ここらへん削除するとdynamicLightColorSchemeが適用されなくなるので、LightColorSchemeで変更したテーマカラーが反映されるようになります。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?