【Android Jetpack Compose】ModalBottomSheet使用時、ステータスバーの文字色調整

はじめに

Android Jetpack ComposeでModalBottomSheetを使用した際、ステータスバーの色が変更されることがある。

※ステータスバーとは、画面上部に表示されるアイコン(時刻・バッテリー残量など)が並んだ領域のこと。

原因

ModalBottomSheetメソッド内でisAppearanceLightStatusBarsの値を変更しているのが原因。

        WindowCompat.getInsetsController(window, window.decorView).apply {
            isAppearanceLightStatusBars = !darkThemeEnabled
            isAppearanceLightNavigationBars = !darkThemeEnabled
        }

※androidx.compose.material3:material3-android:1.3.1ライブラリを使用(2024年12月時点で最新版)

対策

ModalBottomSheetメソッドのcontent内で、再度isAppearanceLightStatusBarsの値を変更させる。(LocalView.current.parent as DialogWindowProvider).windowでwindowを取得するのがポイント。

            ModalBottomSheet(
                onDismissRequest = { showBottomSheet = false },
                sheetState = sheetState
            ) {
                //ステータスバーを変更
                val window = (LocalView.current.parent as DialogWindowProvider).window
                WindowCompat.getInsetsController(window, window.decorView).isAppearanceLightStatusBars = false

                // Sheet content
                Button(onClick = {
                    scope.launch { sheetState.hide() }.invokeOnCompletion {
                        if (!sheetState.isVisible) showBottomSheet = false
                    }
                }) {
                    Text("Hide bottom sheet")
                }
            }

参考サイト

stackoverflow.com