Animated dim with SettingsPager

app/src/main/kotlin/com/hippo/ehviewer/ui/reader/ReaderScreen.kt

@@ -1,5 +1,6 @@
 package com.hippo.ehviewer.ui.reader
 
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
@@ -9,6 +10,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
@@ -171,12 +173,21 @@ fun ReaderScreen(info: BaseGalleryInfo, page: Int = -1, navigator: DestinationsN
                     launch {
                         dialog { cont ->
                             fun dispose() = cont.resume(Unit)
+                            var isColorFilter by remember { mutableStateOf(false) }
+                            val scrim by animateColorAsState(
+                                targetValue = if (isColorFilter) Color.Transparent else BottomSheetDefaults.ScrimColor,
+                                label = "ScrimColor",
+                            )
                             ModalBottomSheet(
                                 onDismissRequest = { dispose() },
+                                // Yeah, I know color state should not be read here, but we have to do it...
+                                scrimColor = scrim,
                                 dragHandle = null,
                                 windowInsets = WindowInsets(0),
                             ) {
-                                SettingsPager(modifier = Modifier.fillMaxSize())
+                                SettingsPager(modifier = Modifier.fillMaxSize()) { page ->
+                                    isColorFilter = page == 2
+                                }
                                 Spacer(modifier = Modifier.navigationBarsPadding())
                             }
                         }

app/src/main/kotlin/com/hippo/ehviewer/ui/reader/SettingsPager.kt

@@ -9,7 +9,9 @@ import androidx.compose.material3.ProvideTextStyle
 import androidx.compose.material3.Tab
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -23,8 +25,13 @@ private val tabs = arrayOf(
 )
 
 @Composable
-fun SettingsPager(modifier: Modifier = Modifier) {
+fun SettingsPager(modifier: Modifier = Modifier, onPageSelected: (Int) -> Unit) {
     val pagerState = rememberPagerState { tabs.size }
+    LaunchedEffect(onPageSelected) {
+        snapshotFlow { pagerState.currentPage }.collect { page ->
+            onPageSelected(page)
+        }
+    }
     val scope = rememberCoroutineScope()
     PrimaryTabRow(
         selectedTabIndex = pagerState.currentPage,

app/src/main/kotlin/eu/kanade/tachiyomi/ui/reader/ReaderActivity.kt

@@ -41,11 +41,13 @@ import androidx.activity.viewModels
 import androidx.annotation.ChecksSdkIntAtLeast
 import androidx.annotation.RequiresApi
 import androidx.annotation.StringRes
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalBottomSheet
@@ -59,6 +61,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.unit.dp
 import androidx.core.content.FileProvider
@@ -306,12 +309,21 @@ class ReaderActivity : EhActivity() {
                     lifecycleScope.launch {
                         dialogState.dialog { cont ->
                             fun dispose() = cont.resume(Unit)
+                            var isColorFilter by remember { mutableStateOf(false) }
+                            val scrim by animateColorAsState(
+                                targetValue = if (isColorFilter) Color.Transparent else BottomSheetDefaults.ScrimColor,
+                                label = "ScrimColor",
+                            )
                             ModalBottomSheet(
                                 onDismissRequest = { dispose() },
                                 dragHandle = null,
+                                // Yeah, I know color state should not be read here, but we have to do it...
+                                scrimColor = scrim,
                                 windowInsets = WindowInsets(0),
                             ) {
-                                SettingsPager(modifier = Modifier.fillMaxSize())
+                                SettingsPager(modifier = Modifier.fillMaxSize()) { page ->
+                                    isColorFilter = page == 2
+                                }
                                 Spacer(modifier = Modifier.navigationBarsPadding())
                             }
                         }