https://kotlinlang.org logo
#compose
Title
# compose
b

Billy Newman

02/27/2023, 6:51 PM
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.
k

Kirill Grouchnikov

02/27/2023, 6:55 PM
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.
b

Billy Newman

02/27/2023, 7:03 PM
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?
Copy code
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.
k

Kirill Grouchnikov

02/27/2023, 7:06 PM
Right, because your
LocalContentColor
always sees the same
onSurfaceVariant
You would need to wrap that second surface in another
MaterialTheme
that is using dark colors
MaterialTheme(*darkColorS*cheme())
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
b

Billy Newman

02/27/2023, 7:22 PM
And just set the surface color in the Theme? Still running into the same issue.
k

Kirill Grouchnikov

02/27/2023, 8:10 PM
Copy code
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")
        }
    }
}
image.png
This is using the default color RGB values under light and dark color schemes in M3.
Including the default fill / background color of M3
Surface
b

Billy Newman

02/28/2023, 2:44 PM
Thank you!