Draw scrim behind status bar to improve a11y

Changes toolbar color to the default as surfaceContainerHighest doesn't
look well in light theme.

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

@@ -13,11 +13,14 @@ import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.safeDrawing
+import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.foundation.layout.windowInsetsTopHeight
 import androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.pager.rememberPagerState
@@ -50,6 +53,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.keepScreenOn
 import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.zIndex
 import androidx.core.view.WindowInsetsControllerCompat
 import arrow.core.Either
 import arrow.core.Either.Companion.catch
@@ -73,6 +77,7 @@ import com.hippo.ehviewer.gallery.useEhPageLoader
 import com.hippo.ehviewer.ui.MainActivity
 import com.hippo.ehviewer.ui.Screen
 import com.hippo.ehviewer.ui.theme.EhTheme
+import com.hippo.ehviewer.ui.theme.scrim
 import com.hippo.ehviewer.ui.tools.Await
 import com.hippo.ehviewer.ui.tools.DialogState
 import com.hippo.ehviewer.ui.tools.asyncInVM
@@ -232,6 +237,10 @@ fun ReaderScreen(pageLoader: PageLoader, info: BaseGalleryInfo?) {
                     uiController.isSystemBarsVisible = it
                 }
             }
+            Box(
+                Modifier.windowInsetsTopHeight(WindowInsets.statusBars).fillMaxWidth()
+                    .align(Alignment.TopCenter).background(bgColor.scrim()).zIndex(1f),
+            )
         }
         var showNavigationOverlay by remember {
             val showOnStart = Settings.showNavigationOverlayNewUser.value || Settings.showNavigationOverlayOnStart.value

app/src/main/kotlin/com/hippo/ehviewer/ui/screen/SearchBarScreen.kt

@@ -1,10 +1,12 @@
 package com.hippo.ehviewer.ui.screen
 
 import androidx.compose.animation.AnimatedContent
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.focusable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -19,9 +21,10 @@ import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.safeDrawing
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.foundation.layout.windowInsetsTopHeight
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.text.input.TextFieldState
@@ -38,6 +41,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.ListItemDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SearchBar
 import androidx.compose.material3.SearchBarDefaults
@@ -70,6 +74,7 @@ import com.hippo.ehviewer.dao.Search
 import com.hippo.ehviewer.dao.SearchDao
 import com.hippo.ehviewer.ui.LocalNavDrawerState
 import com.hippo.ehviewer.ui.destinations.ImageSearchScreenDestination
+import com.hippo.ehviewer.ui.theme.scrim
 import com.hippo.ehviewer.ui.tools.DialogState
 import com.hippo.ehviewer.ui.tools.awaitConfirmationOrCancel
 import com.hippo.ehviewer.ui.tools.rememberCompositionActiveState
@@ -211,8 +216,13 @@ fun SearchBarScreen(
     BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
         Scaffold(
             topBar = {
-                // Placeholder, fill immutable SearchBar padding
-                Spacer(modifier = Modifier.statusBarsPadding().height(SearchBarDefaults.InputFieldHeight + 16.dp))
+                Column {
+                    val scrim = MaterialTheme.colorScheme.background.scrim()
+                    Box(Modifier.windowInsetsTopHeight(WindowInsets.statusBars).fillMaxWidth().background(scrim))
+
+                    // Placeholder, fill immutable SearchBar padding
+                    Spacer(modifier = Modifier.height(SearchBarDefaults.InputFieldHeight + 16.dp))
+                }
             },
             floatingActionButton = floatingActionButton,
             content = content,

app/src/main/kotlin/com/hippo/ehviewer/ui/theme/Theme.kt

@@ -3,6 +3,7 @@ package com.hippo.ehviewer.ui.theme
 import android.app.WallpaperManager
 import android.os.Build
 import androidx.annotation.RequiresApi
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.scrollbar.LocalScrollbarStyle
 import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.LocalContentColor
@@ -74,6 +75,9 @@ fun EhTheme(useDarkTheme: Boolean, content: @Composable () -> Unit) {
     }
 }
 
+@Composable
+fun Color.scrim() = copy(alpha = if (isSystemInDarkTheme()) 0.5f else 0.9f)
+
 typealias WallPaperPalette = Triple<Color, Color?, Color?>
 
 @Composable

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

@@ -1,6 +1,5 @@
 package eu.kanade.tachiyomi.ui.reader
 
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.size
@@ -15,7 +14,6 @@ import androidx.compose.material3.FlexibleBottomAppBar
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.IconButtonDefaults
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -23,6 +21,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.Dp
@@ -39,8 +38,8 @@ import eu.kanade.tachiyomi.ui.reader.setting.PreferenceType
 import eu.kanade.tachiyomi.ui.reader.setting.ReadingModeType
 
 @Composable
-fun BottomReaderBar(onClickSettings: () -> Unit) = FlexibleBottomAppBar(
-    containerColor = toolbarColor,
+fun BottomReaderBar(onClickSettings: () -> Unit, containerColor: Color) = FlexibleBottomAppBar(
+    containerColor = containerColor,
     contentPadding = PaddingValues.Zero,
     horizontalArrangement = Arrangement.SpaceEvenly,
 ) {
@@ -77,10 +76,6 @@ fun BottomReaderBar(onClickSettings: () -> Unit) = FlexibleBottomAppBar(
     )
 }
 
-// Use surface container highest to have a higher contract on grey background
-val toolbarColor
-    @Composable get() = MaterialTheme.colorScheme.surfaceContainerHighest.copy(alpha = if (isSystemInDarkTheme()) 0.9f else 0.95f)
-
 @Composable
 private fun DropdownIconButton(
     label: String,

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

@@ -15,6 +15,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
@@ -31,11 +32,12 @@ fun ChapterNavigator(
     currentPage: Int,
     totalPages: Int,
     onSliderValueChange: (Int) -> Unit,
+    containerColor: Color,
 ) = CompositionLocalProvider(LocalLayoutDirection provides if (isRtl) LayoutDirection.Rtl else LayoutDirection.Ltr) {
     val windowSizeClass = LocalWindowSizeClass.current
     val horizontalPadding = if (windowSizeClass.isExpanded) 24.dp else 16.dp
     Row(
-        modifier = Modifier.padding(horizontal = horizontalPadding).clip(CircleShape).background(toolbarColor).padding(horizontal = 16.dp),
+        modifier = Modifier.padding(horizontal = horizontalPadding).clip(CircleShape).background(containerColor).padding(horizontal = 16.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Text(text = "$currentPage")

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

@@ -4,6 +4,7 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.slideInVertically
 import androidx.compose.animation.slideOutVertically
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.WindowInsets
@@ -11,6 +12,7 @@ import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.material3.BottomAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.IntOffset
@@ -34,6 +36,7 @@ fun ReaderAppBars(
     enter = slideInVertically(initialOffsetY = { it }, animationSpec = animationSpec),
     exit = slideOutVertically(targetOffsetY = { it }, animationSpec = animationSpec),
 ) {
+    val toolbarColor = BottomAppBarDefaults.containerColor.copy(alpha = if (isSystemInDarkTheme()) 0.9f else 0.95f)
     Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
         if (showSeekBar && totalPages > 1) {
             ChapterNavigator(
@@ -41,8 +44,9 @@ fun ReaderAppBars(
                 currentPage = currentPage,
                 totalPages = totalPages,
                 onSliderValueChange = onSliderValueChange,
+                containerColor = toolbarColor,
             )
         }
-        BottomReaderBar(onClickSettings = onClickSettings)
+        BottomReaderBar(onClickSettings = onClickSettings, containerColor = toolbarColor)
     }
 }