Hello all, material3 question in regards to LocalContentColor. I am showing text on two different b...

# compose

[Billy Newman]

Hello all, material3 question in regards to LocalContentColor. I am showing text on two different backgrounds, one dark and one light. I would like the text to have a bit of alpha so I am using MaterialTheme.colorScheme.onSurfaceVariant. I would like the text to be white w/ alpha on the dark background and black w/ alpha on the light background. However the text is always black.

[Kirill Grouchnikov]

Are you running with the same top-level MaterialTheme wrapper that provides that color scheme? If so, how do you expect its onSurfaceVariant to change? Those entries are not “aware” of the background color of your surface.

[Billy Newman]

I am running with the same top level theme. I guess that is my question, if I have 2 surfaces, what is the compose way to get the right text color?

Surface() {  //light
  MyTextComposable()
}

Surface(color = MaterialTheme.colorScheme.primary) { // dark
  MyTextComposable()
}

@Composable
fun MyTextComposable() {
  CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurfaceVariant) {
     Text(...)
  }
}

This worked w/ the material2 compose library out of the box. However, material3 the text is always black.

[Kirill Grouchnikov]

Right, because your LocalContentColor always sees the same onSurfaceVariant

[Kirill Grouchnikov]

You would need to wrap that second surface in another MaterialTheme that is using dark colors

[Kirill Grouchnikov]

MaterialTheme(*darkColorS*cheme())

[Kirill Grouchnikov]

Then you wouldn’t need to set a separate color for that surface, it would take the “right” default background color that matches the dark colors

[Billy Newman]

And just set the surface color in the Theme? Still running into the same issue.

[Kirill Grouchnikov]

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.*

fun main() = application {
    Window(
        onCloseRequest = ::exitApplication,
        state = WindowState(
            placement = WindowPlacement.Floating,
            position = WindowPosition.Aligned(alignment = Alignment.Center),
            size = DpSize(400.dp, 400.dp)
        )
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            MaterialTheme(colorScheme = lightColorScheme()) {
                MySurface(modifier = Modifier.fillMaxWidth().fillMaxHeight(0.5f))
            }
            MaterialTheme(colorScheme = darkColorScheme()) {
                MySurface(modifier = Modifier.fillMaxWidth().fillMaxHeight(1.0f))
            }
        }
    }
}

@Composable
fun MySurface(modifier: Modifier) {
    Surface(modifier = modifier) {
        Column(modifier = Modifier.fillMaxSize().padding(12.dp)) {
            Text(color = MaterialTheme.colorScheme.onSurface, text = "Text 1")
            Text(color = MaterialTheme.colorScheme.onSurfaceVariant, text = "Text 2")
        }
    }
}

[Kirill Grouchnikov]

image.png

[Kirill Grouchnikov]

This is using the default color RGB values under light and dark color schemes in M3.

[Kirill Grouchnikov]

Including the default fill / background color of M3 Surface

[Billy Newman]

Thank you!