From c9d9e7ab6cf0103356018212737907319d09dad4 Mon Sep 17 00:00:00 2001 From: Matt Van Horn <455140+mvanhorn@users.noreply.github.com> Date: Wed, 17 Jun 2026 01:53:41 -0700 Subject: [PATCH 1/2] Make settings section separators visible in black theme In the Black (OLED) theme the canvas is forced to pure black while the section-separator divider keeps its standard-dark colour (outlineVariant, ~10% alpha white), leaving dividers in Settings and related screens almost invisible. Add an OLED-aware listSectionDivider alias that lightens the divider only when the black theme is active, and use it for the ListSectionHeader divider. Light and standard-dark themes are unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) Signed-off-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com> --- .../libraries/designsystem/theme/ColorAliases.kt | 11 +++++++++++ .../theme/components/ListSectionHeader.kt | 6 +++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt index 8973e312ce9..74d0cfb6f77 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt @@ -78,6 +78,17 @@ val SemanticColors.pinnedMessageBannerBorder val SemanticColors.floatingDateBadgeBackground get() = if (isLight) bgCanvasDefault else bgSubtlePrimary +// The OLED/Black theme forces bgCanvasDefault to pure black (see ElementTheme.kt) but leaves the +// divider color at its standard-dark value, which is almost invisible against pure black. Lighten +// the section-separator divider only in that case; light and standard-dark themes are unchanged. +@OptIn(CoreColorToken::class) +val SemanticColors.listSectionDivider: Color + get() = if (!isLight && bgCanvasDefault == Color.Black) { + DarkColorTokens.colorAlphaGray700 + } else { + if (isLight) LightColorTokens.colorAlphaGray400 else DarkColorTokens.colorAlphaGray400 + } + @PreviewsDayNight @Composable internal fun ColorAliasesPreview() = ElementPreview { diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSectionHeader.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSectionHeader.kt index 3a86d72e7d3..8c3b0c8f71c 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSectionHeader.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSectionHeader.kt @@ -24,6 +24,7 @@ import androidx.compose.ui.unit.dp import io.element.android.compound.theme.ElementTheme import io.element.android.libraries.designsystem.preview.ElementThemedPreview import io.element.android.libraries.designsystem.preview.PreviewGroup +import io.element.android.libraries.designsystem.theme.listSectionDivider // Designs: https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?type=design&node-id=425%3A24208&mode=design&t=G5hCfkLB6GgXDuWe-1 @@ -43,7 +44,10 @@ fun ListSectionHeader( ) { Column(modifier.fillMaxWidth()) { if (hasDivider) { - HorizontalDivider(modifier = Modifier.padding(top = 16.dp)) + HorizontalDivider( + modifier = Modifier.padding(top = 16.dp), + color = ElementTheme.colors.listSectionDivider, + ) } Column( modifier = Modifier.padding(16.dp), From e02ed32ef013c12142aed830b84fdfc568ee339e Mon Sep 17 00:00:00 2001 From: Matt Van Horn <455140+mvanhorn@users.noreply.github.com> Date: Thu, 18 Jun 2026 21:59:36 -0700 Subject: [PATCH 2/2] Set separatorSecondary for Black theme instead of a custom divider alias Following review feedback: now that the global HorizontalDivider uses separatorSecondary (#7054), give the Black/OLED theme a visible separatorSecondary value in ElementTheme instead of carrying a bespoke listSectionDivider alias. This fixes all separators on pure black, not just section headers. The exact color is pending design confirmation. --- .../io/element/android/compound/theme/ElementTheme.kt | 9 ++++++++- .../libraries/designsystem/theme/ColorAliases.kt | 11 ----------- .../theme/components/ListSectionHeader.kt | 6 +----- 3 files changed, 9 insertions(+), 17 deletions(-) diff --git a/libraries/compound/src/main/kotlin/io/element/android/compound/theme/ElementTheme.kt b/libraries/compound/src/main/kotlin/io/element/android/compound/theme/ElementTheme.kt index ac833656588..09755d454d3 100644 --- a/libraries/compound/src/main/kotlin/io/element/android/compound/theme/ElementTheme.kt +++ b/libraries/compound/src/main/kotlin/io/element/android/compound/theme/ElementTheme.kt @@ -28,11 +28,13 @@ import androidx.compose.runtime.staticCompositionLocalOf import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.toArgb import androidx.compose.ui.platform.LocalContext +import io.element.android.compound.annotations.CoreColorToken import io.element.android.compound.tokens.compoundTypography import io.element.android.compound.tokens.generated.SemanticColors import io.element.android.compound.tokens.generated.TypographyTokens import io.element.android.compound.tokens.generated.compoundColorsDark import io.element.android.compound.tokens.generated.compoundColorsLight +import io.element.android.compound.tokens.generated.internal.DarkColorTokens /** * Inspired from https://medium.com/@lucasyujideveloper/54cbcbde1ace @@ -89,6 +91,7 @@ internal val LocalCompoundColors = staticCompositionLocalOf { compoundColorsLigh * @param typography the Material 3 [Typography] tokens to use. It'll use [compoundTypography] by default. * @param content the content to apply the theme to. */ +@OptIn(CoreColorToken::class) @Composable fun ElementTheme( theme: Theme = if (isSystemInDarkTheme()) Theme.Dark else Theme.Light, @@ -106,7 +109,11 @@ fun ElementTheme( val darkTheme = theme.isDark() val currentCompoundColor = when { darkTheme -> if (theme == Theme.Black) { - compoundDark.copy(bgCanvasDefault = Color.Black) + compoundDark.copy( + bgCanvasDefault = Color.Black, + // Pending design confirmation from americanrefugee/bmarty. + separatorSecondary = DarkColorTokens.colorGray400, + ) } else { compoundDark } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt index 74d0cfb6f77..8973e312ce9 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt @@ -78,17 +78,6 @@ val SemanticColors.pinnedMessageBannerBorder val SemanticColors.floatingDateBadgeBackground get() = if (isLight) bgCanvasDefault else bgSubtlePrimary -// The OLED/Black theme forces bgCanvasDefault to pure black (see ElementTheme.kt) but leaves the -// divider color at its standard-dark value, which is almost invisible against pure black. Lighten -// the section-separator divider only in that case; light and standard-dark themes are unchanged. -@OptIn(CoreColorToken::class) -val SemanticColors.listSectionDivider: Color - get() = if (!isLight && bgCanvasDefault == Color.Black) { - DarkColorTokens.colorAlphaGray700 - } else { - if (isLight) LightColorTokens.colorAlphaGray400 else DarkColorTokens.colorAlphaGray400 - } - @PreviewsDayNight @Composable internal fun ColorAliasesPreview() = ElementPreview { diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSectionHeader.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSectionHeader.kt index 8c3b0c8f71c..3a86d72e7d3 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSectionHeader.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListSectionHeader.kt @@ -24,7 +24,6 @@ import androidx.compose.ui.unit.dp import io.element.android.compound.theme.ElementTheme import io.element.android.libraries.designsystem.preview.ElementThemedPreview import io.element.android.libraries.designsystem.preview.PreviewGroup -import io.element.android.libraries.designsystem.theme.listSectionDivider // Designs: https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?type=design&node-id=425%3A24208&mode=design&t=G5hCfkLB6GgXDuWe-1 @@ -44,10 +43,7 @@ fun ListSectionHeader( ) { Column(modifier.fillMaxWidth()) { if (hasDivider) { - HorizontalDivider( - modifier = Modifier.padding(top = 16.dp), - color = ElementTheme.colors.listSectionDivider, - ) + HorizontalDivider(modifier = Modifier.padding(top = 16.dp)) } Column( modifier = Modifier.padding(16.dp),