【Jetpack Compose】端末のダークモード設定に応じて色などを変更して使いたい
Jetpack Composeによる開発では、スタイルなどUIの見た目に関する設定もほぼ全てkotlinのコードで記載することが基本です。
しかし、例えば端末のダークモード設定によって色などを変更したい場合、端末設定を参照しつつ、一つ一つIfやwhenで記載していくのも面倒なため、少しでも楽になる方法を考えます。
//--- Booleanの値により色などを出し分けるシンプルなクラス
open class ModeObject<T>(lightModeValue: T, darkModeValue: T) {
fun getValue(isDarkMode: Boolean): T {
return when (isDarkMode) {
true -> darkModeValue
false -> lightModeValue
}
}
@Composable
fun value(isDarkMode: Boolean = isSystemInDarkTheme()): T {
return getValue(isDarkMode)
}
}上記のようなシンプルな出し分けクラスを作っておき、そのまま使ったり、またColorやBrushなど種類に応じたサブクラスを定義して使ったりすることで、Composable内でvalue()を呼び出すだけで端末のダークモード設定による場合分けが楽になります。
使用例としては以下のような感じです。
// モード毎で出し分けたいものを定義
val bgColorByMode = ModeObject(
lightModeValue = Color.White,
darkModeValue = Color.Black
)
val textColorByMode = ModeObject(
lightModeValue = Color.Black,
darkModeValue = Color.White
)
@Composable
fun ContentTest(
modifier: Modifier = Modifier,
isDarkMode: Boolean = isSystemInDarkTheme()
) {
// Composable関数のvalue()呼び出し
val bgColor = bgColorByMode.value()
// 値をがっちり固定したい場合はrememberで
// （recompose時のことを考えるとこちらの方が良いかも）
val textColor = remember (isDarkMode) {
textColorByMode.getValue(isDarkMode)
}
・・・
}