Increase contrast for drawer items in Monochrome (#1647)

Author: jocmp

app/src/main/java/com/capyreader/app/ui/articles/SavedSearchRow.kt

@@ -1,9 +1,9 @@
 package com.capyreader.app.ui.articles
 
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.NavigationDrawerItem
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.Preview
+import com.capyreader.app.ui.articles.feeds.DrawerItem
 import com.jocmp.capy.SavedSearch
 
 @Composable
@@ -12,7 +12,7 @@ fun SavedSearchRow(
     selected: Boolean,
     savedSearch: SavedSearch,
 ) {
-    NavigationDrawerItem(
+    DrawerItem(
         label = { ListTitle(savedSearch.name) },
         selected = selected,
         onClick = {

app/src/main/java/com/capyreader/app/ui/articles/feeds/DrawerItem.kt

@@ -10,30 +10,39 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationDrawerItemColors
 import androidx.compose.material3.NavigationDrawerItemDefaults
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 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.graphics.Shape
 import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.capyreader.app.preferences.AppTheme
+import com.capyreader.app.ui.theme.CapyTheme
+import com.capyreader.app.ui.theme.LocalAppTheme
 
 @Composable
 fun DrawerItem(
     label: @Composable () -> Unit,
     selected: Boolean,
     onClick: () -> Unit,
-    onLongClick: () -> Unit,
     modifier: Modifier = Modifier,
+    onLongClick: () -> Unit = {},
     icon: (@Composable () -> Unit)? = null,
     badge: (@Composable () -> Unit)? = null,
     shape: Shape = CircleShape,
-    colors: NavigationDrawerItemColors = NavigationDrawerItemDefaults.colors(),
 ) {
+    val colors = NavigationDrawerItemDefaults.colors()
+    val mappedColors = colors.mapToTheme(selected = selected)
+
     Surface(
         modifier = modifier
             .heightIn(min = 56.dp)
@@ -45,26 +54,111 @@ fun DrawerItem(
                 role = Role.Tab,
             ),
         shape = shape,
-        color = colors.containerColor(selected).value,
+        color = mappedColors.containerColor,
     ) {
         Row(
             Modifier.padding(start = 16.dp, end = 24.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
             if (icon != null) {
-                val iconColor = colors.iconColor(selected).value
-                CompositionLocalProvider(LocalContentColor provides iconColor, content = icon)
+                CompositionLocalProvider(
+                    LocalContentColor provides mappedColors.iconColor,
+                    content = icon
+                )
                 Spacer(Modifier.width(12.dp))
             }
             Box(Modifier.weight(1f)) {
-                val labelColor = colors.textColor(selected).value
-                CompositionLocalProvider(LocalContentColor provides labelColor, content = label)
+                CompositionLocalProvider(
+                    LocalContentColor provides mappedColors.textColor,
+                    content = label
+                )
             }
             if (badge != null) {
                 Spacer(Modifier.width(12.dp))
-                val badgeColor = colors.badgeColor(selected).value
-                CompositionLocalProvider(LocalContentColor provides badgeColor, content = badge)
+                CompositionLocalProvider(
+                    LocalContentColor provides mappedColors.badgeColor,
+                    content = badge
+                )
             }
         }
     }
 }
+
+private data class DrawerColors(
+    val containerColor: Color,
+    val iconColor: Color,
+    val textColor: Color,
+    val badgeColor: Color,
+)
+
+@Composable
+private fun NavigationDrawerItemColors.mapToTheme(
+    selected: Boolean,
+): DrawerColors {
+    val isMonochrome = LocalAppTheme.current == AppTheme.MONOCHROME
+    val useMonochromeSelected = selected && isMonochrome
+    val unselectedTextColor = textColor(false).value
+    val surfaceColor = MaterialTheme.colorScheme.surface
+
+    return DrawerColors(
+        containerColor = if (useMonochromeSelected) {
+            unselectedTextColor
+        } else {
+            containerColor(selected).value
+        },
+        iconColor = if (useMonochromeSelected) {
+            surfaceColor
+        } else {
+            iconColor(selected).value
+        },
+        textColor = if (useMonochromeSelected) {
+            surfaceColor
+        } else {
+            textColor(selected).value
+        },
+        badgeColor = if (useMonochromeSelected) {
+            surfaceColor
+        } else {
+            badgeColor(selected).value
+        },
+    )
+}
+
+@Preview
+@Composable
+fun DrawerItemSelectedPreview() {
+    CapyTheme {
+        DrawerItem(
+            label = { Text("Title Goes Here") },
+            selected = true,
+            onClick = {},
+            onLongClick = {},
+        )
+    }
+}
+
+@Preview
+@Composable
+fun DrawerItemSelectedMonochromePreview() {
+    CapyTheme(AppTheme.MONOCHROME) {
+        DrawerItem(
+            label = { Text("Title Goes Here") },
+            selected = true,
+            onClick = {},
+            onLongClick = {},
+        )
+    }
+}
+
+@Preview
+@Composable
+fun DrawerItemPreview() {
+    CapyTheme {
+        DrawerItem(
+            label = { Text("Title Goes Here") },
+            selected = false,
+            onClick = {},
+            onLongClick = {},
+        )
+    }
+}

app/src/main/java/com/capyreader/app/ui/articles/feeds/FeedList.kt

@@ -19,7 +19,6 @@ import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.NavigationDrawerItem
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -127,7 +126,7 @@ fun FeedList(
                     )
                 }
             }
-            NavigationDrawerItem(
+            DrawerItem(
                 icon = { ArticleStatusIcon(status = articleStatus) },
                 label = {
                     ListTitle(
@@ -142,7 +141,7 @@ fun FeedList(
             )
 
             if (showTodayFilter) {
-                NavigationDrawerItem(
+                DrawerItem(
                     icon = {
                         Icon(
                             Icons.Rounded.Today,