From 17495659eb1298bd9369fc78125bb87d190d6609 Mon Sep 17 00:00:00 2001 From: Paul Hitt Date: Mon, 7 Sep 2026 14:57:40 -0400 Subject: [PATCH] =?UTF-8?q?Icons=20and=20initials=20are=20white,=20not=20t?= =?UTF-8?q?he=20accent=20=E2=80=94=20matches=20ios!144?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🔴 The accent was being used the wrong way round. It is a mid purple chosen to be readable as a FILL with white on top of it; as the INK for a glyph on a dark ground it is a light purple mark on a dark blue field, which reads as a disabled control rather than a button. `Palette.OnDark` is white. Three sets of avatar initials and fourteen accent-tinted icons. ⚠️ The selected tab keeps the accent. Its tint reads `if (selected) MaterialTheme.colorScheme.primary else Palette.SecondaryText` — a conditional, so the sweep did not catch it, and that is the right outcome: the selected tab is the one place the accent as ink is doing a job nothing else does. ⚠️ The accent still fills: primary buttons, badges, the pill's selected state. Ink versus fill, not "purple is gone". Co-Authored-By: Claude Opus 5 --- .../kotlin/io/flamenet/messenger/app/CallScreen.kt | 2 +- .../kotlin/io/flamenet/messenger/app/CallsScreen.kt | 10 +++++----- .../kotlin/io/flamenet/messenger/app/ChatScreens.kt | 12 +++++++----- .../io/flamenet/messenger/app/ContactDetail.kt | 5 +++-- .../kotlin/io/flamenet/messenger/app/MainActivity.kt | 2 +- .../io/flamenet/messenger/app/MessagesScreen.kt | 6 +++--- .../kotlin/io/flamenet/messenger/app/StoriesFeed.kt | 2 +- .../main/kotlin/io/flamenet/messenger/app/Theme.kt | 11 +++++++++++ 8 files changed, 32 insertions(+), 18 deletions(-) diff --git a/app/src/main/kotlin/io/flamenet/messenger/app/CallScreen.kt b/app/src/main/kotlin/io/flamenet/messenger/app/CallScreen.kt index 35c976e..de55e3e 100644 --- a/app/src/main/kotlin/io/flamenet/messenger/app/CallScreen.kt +++ b/app/src/main/kotlin/io/flamenet/messenger/app/CallScreen.kt @@ -89,7 +89,7 @@ fun CallScreenBody( initials, fontSize = 40.sp, fontWeight = FontWeight.Bold, - color = MaterialTheme.colorScheme.primary, + color = Palette.OnDark, ) } } diff --git a/app/src/main/kotlin/io/flamenet/messenger/app/CallsScreen.kt b/app/src/main/kotlin/io/flamenet/messenger/app/CallsScreen.kt index b5cf665..55eafe8 100644 --- a/app/src/main/kotlin/io/flamenet/messenger/app/CallsScreen.kt +++ b/app/src/main/kotlin/io/flamenet/messenger/app/CallsScreen.kt @@ -69,7 +69,7 @@ fun ColumnScope.CallsScreen( Icon( KitIcon.Call, contentDescription = "New call", - tint = Palette.Accent, + tint = Palette.OnDark, modifier = Modifier .size(28.dp) .clickable { showNewCall.value = true } @@ -105,12 +105,12 @@ fun ColumnScope.CallsScreen( overflow = TextOverflow.Ellipsis, ) Icon(KitIcon.Call, contentDescription = null, - tint = Palette.Accent, modifier = Modifier.size(20.dp)) + tint = Palette.OnDark, modifier = Modifier.size(20.dp)) Spacer(Modifier.width(Space.md)) Icon( KitIcon.Video, contentDescription = "Video call", - tint = Palette.Accent, + tint = Palette.OnDark, modifier = Modifier .size(22.dp) .clickable { @@ -226,7 +226,7 @@ fun ColumnScope.CallsScreen( Icon( KitIcon.Video, contentDescription = "Video call $name", - tint = MaterialTheme.colorScheme.primary, + tint = Palette.OnDark, modifier = Modifier.size(Kit.icon), ) } @@ -243,7 +243,7 @@ fun ColumnScope.CallsScreen( Icon( KitIcon.Call, contentDescription = "Call $name", - tint = MaterialTheme.colorScheme.primary, + tint = Palette.OnDark, modifier = Modifier.size(Kit.icon), ) } diff --git a/app/src/main/kotlin/io/flamenet/messenger/app/ChatScreens.kt b/app/src/main/kotlin/io/flamenet/messenger/app/ChatScreens.kt index c61be4d..cb03ab2 100644 --- a/app/src/main/kotlin/io/flamenet/messenger/app/ChatScreens.kt +++ b/app/src/main/kotlin/io/flamenet/messenger/app/ChatScreens.kt @@ -437,7 +437,7 @@ fun ColumnScope.GroupsSection( androidx.compose.material3.Icon( if (creating) KitIcon.Close else KitIcon.NewGroup, contentDescription = "New group", - tint = Palette.Accent, + tint = Palette.OnDark, modifier = Modifier .size(22.dp) .clickable { onCreatingChange(!creating) } @@ -1448,7 +1448,9 @@ internal fun Avatar( initials, fontSize = (size.value * 0.33f).sp, fontWeight = FontWeight.SemiBold, - color = MaterialTheme.colorScheme.primary, + // White on the avatar circle. The accent as ink on a dark + // circle is a light purple mark on a dark blue field. + color = Palette.OnDark, ) } } @@ -1540,7 +1542,7 @@ private fun AlertGlyph(kind: String) { Icon( symbol, contentDescription = null, - tint = MaterialTheme.colorScheme.primary, + tint = Palette.OnDark, modifier = Modifier.size(Kit.icon), ) } @@ -2789,7 +2791,7 @@ fun ColumnScope.StoryStrip( Icon( KitIcon.Add, contentDescription = null, - tint = MaterialTheme.colorScheme.primary, + tint = Palette.OnDark, modifier = Modifier.size(Kit.icon), ) } @@ -2826,7 +2828,7 @@ fun ColumnScope.StoryStrip( label.take(1).uppercase(), fontSize = 16.sp, fontWeight = FontWeight.SemiBold, - color = MaterialTheme.colorScheme.primary, + color = Palette.OnDark, ) } Text( diff --git a/app/src/main/kotlin/io/flamenet/messenger/app/ContactDetail.kt b/app/src/main/kotlin/io/flamenet/messenger/app/ContactDetail.kt index 274626a..0baf6d8 100644 --- a/app/src/main/kotlin/io/flamenet/messenger/app/ContactDetail.kt +++ b/app/src/main/kotlin/io/flamenet/messenger/app/ContactDetail.kt @@ -80,7 +80,7 @@ fun ColumnScope.ContactDetail( Icon( KitIcon.Back, contentDescription = null, - tint = MaterialTheme.colorScheme.primary, + tint = Palette.OnDark, modifier = Modifier.size(Kit.icon), ) } @@ -111,7 +111,8 @@ fun ColumnScope.ContactDetail( initials, fontSize = 64.sp, fontWeight = FontWeight.Bold, - color = MaterialTheme.colorScheme.primary, + // White on the avatar circle, like every other one. + color = Palette.OnDark, ) } } diff --git a/app/src/main/kotlin/io/flamenet/messenger/app/MainActivity.kt b/app/src/main/kotlin/io/flamenet/messenger/app/MainActivity.kt index 721fa42..93b22d1 100644 --- a/app/src/main/kotlin/io/flamenet/messenger/app/MainActivity.kt +++ b/app/src/main/kotlin/io/flamenet/messenger/app/MainActivity.kt @@ -912,7 +912,7 @@ private fun BarAction( Icon( icon, contentDescription = null, - tint = MaterialTheme.colorScheme.primary, + tint = Palette.OnDark, modifier = Modifier.size(Kit.icon), ) } diff --git a/app/src/main/kotlin/io/flamenet/messenger/app/MessagesScreen.kt b/app/src/main/kotlin/io/flamenet/messenger/app/MessagesScreen.kt index 077a66f..8689900 100644 --- a/app/src/main/kotlin/io/flamenet/messenger/app/MessagesScreen.kt +++ b/app/src/main/kotlin/io/flamenet/messenger/app/MessagesScreen.kt @@ -76,7 +76,7 @@ fun ColumnScope.MessagesScreen( androidx.compose.material3.Icon( KitIcon.Scan, contentDescription = "Scan an address", - tint = Palette.Accent, + tint = Palette.OnDark, modifier = Modifier .size(24.dp) .clickable { @@ -92,7 +92,7 @@ fun ColumnScope.MessagesScreen( androidx.compose.material3.Icon( if (addingContact) KitIcon.Close else KitIcon.Add, contentDescription = "Add contact", - tint = Palette.Accent, + tint = Palette.OnDark, modifier = Modifier .size(26.dp) .clickable { addingContact = !addingContact } @@ -168,7 +168,7 @@ fun ColumnScope.MessagesScreen( androidx.compose.material3.Icon( KitIcon.NewChat, contentDescription = "New chat", - tint = Palette.Accent, + tint = Palette.OnDark, modifier = Modifier .size(22.dp) .clickable { showNewChat.value = true } diff --git a/app/src/main/kotlin/io/flamenet/messenger/app/StoriesFeed.kt b/app/src/main/kotlin/io/flamenet/messenger/app/StoriesFeed.kt index 4d9ac5e..bb6dd0c 100644 --- a/app/src/main/kotlin/io/flamenet/messenger/app/StoriesFeed.kt +++ b/app/src/main/kotlin/io/flamenet/messenger/app/StoriesFeed.kt @@ -95,7 +95,7 @@ fun ColumnScope.StoriesFeed( Icon( KitIcon.Add, contentDescription = "New story", - tint = Palette.Accent, + tint = Palette.OnDark, modifier = Modifier .size(28.dp) .clickable { choosing = true } diff --git a/app/src/main/kotlin/io/flamenet/messenger/app/Theme.kt b/app/src/main/kotlin/io/flamenet/messenger/app/Theme.kt index 0874187..c1ff51e 100644 --- a/app/src/main/kotlin/io/flamenet/messenger/app/Theme.kt +++ b/app/src/main/kotlin/io/flamenet/messenger/app/Theme.kt @@ -101,6 +101,17 @@ object Palette { // ⚠️ A blue-tinted grey rather than the flat #F3F3F3: an initials avatar // needs to read as a circle against the surface behind it, and two greys a // shade apart do not. + // Icons and initials drawn ON a dark surface. + // + // 🔴 White, not the accent. The accent is a mid purple chosen to be + // readable as a FILL with white on top of it. Used as the ink for a glyph + // on a dark ground it is the wrong way round — a light purple mark on a + // dark blue field, the least legible thing on the screen, and it reads as + // a disabled control rather than a button. + // + // ⚠️ The accent still fills: primary buttons, the selected tab, badges. + val OnDark = Color(0xFFFFFFFF) + val AvatarFill = Color(0xFF243480) // 🔴 **Darkened with the ground, not left behind it.** #505C69 read 5.0:1 // on the old bottom stop and only 3.5:1 on the darker one — below AA, and