From 08e4863d9467be1525e9b937ac00fde1ecd29218 Mon Sep 17 00:00:00 2001
From: Ivan Iskandar <12537387+ivaniskandar@users.noreply.github.com>
Date: Fri, 5 May 2023 00:55:53 +0700
Subject: [PATCH] ChapterNavigator: Fix background color (#9450)

---
 .../eu/kanade/presentation/reader/ChapterNavigator.kt    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/src/main/java/eu/kanade/presentation/reader/ChapterNavigator.kt b/app/src/main/java/eu/kanade/presentation/reader/ChapterNavigator.kt
index ee089ce8ea..3814fc30d2 100644
--- a/app/src/main/java/eu/kanade/presentation/reader/ChapterNavigator.kt
+++ b/app/src/main/java/eu/kanade/presentation/reader/ChapterNavigator.kt
@@ -1,6 +1,7 @@
 package eu.kanade.presentation.reader
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -15,6 +16,7 @@ import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Slider
 import androidx.compose.material3.Text
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
@@ -43,8 +45,6 @@ fun ChapterNavigator(
     val isTabletUi = isTabletUi()
     val horizontalPadding = if (isTabletUi) 24.dp else 16.dp
     val layoutDirection = if (isRtl) LayoutDirection.Rtl else LayoutDirection.Ltr
-
-    val backgroundColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.9f)
     val haptic = LocalHapticFeedback.current
 
     // We explicitly handle direction based on the reader viewer rather than the system direction
@@ -55,6 +55,11 @@ fun ChapterNavigator(
                 .padding(horizontal = horizontalPadding),
             verticalAlignment = Alignment.CenterVertically,
         ) {
+            // Match with toolbar background color set in ReaderActivity
+            val backgroundColor = MaterialTheme.colorScheme
+                .surfaceColorAtElevation(3.dp)
+                .copy(alpha = if (isSystemInDarkTheme()) 0.9f else 0.95f)
+
             val isLeftEnabled = if (isRtl) enabledNext else enabledPrevious
             if (isLeftEnabled) {
                 FilledIconButton(