Make settings section separators visible in black theme (#7039)

* 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) <noreply@anthropic.com>
Signed-off-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>

* 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.

* chore(theme): remove in-code design discussion comment

Move design discussion out of the code per review; the divider color
decision lives in the PR thread.

* Update screenshots

Signed-off-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>

---------

Signed-off-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>
Co-authored-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: ElementBot <android@element.io>
Co-authored-by: Jorge Martin Espinosa <jorgem@element.io>
This commit is contained in:
Matt Van Horn
2026-07-28 00:51:15 -07:00
committed by GitHub
parent cc3c68411e
commit 9042b4be4f
10 changed files with 19 additions and 13 deletions
@@ -33,11 +33,13 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
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
@@ -94,6 +96,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,
@@ -111,7 +114,10 @@ fun ElementTheme(
val darkTheme = theme.isDark()
val currentCompoundColor = when {
darkTheme -> if (theme == Theme.Black) {
compoundDark.copy(bgCanvasDefault = Color.Black)
compoundDark.copy(
bgCanvasDefault = Color.Black,
separatorSecondary = DarkColorTokens.colorGray400,
)
} else {
compoundDark
}