MaterialTheme.colorScheme.surface is always white in Compose Preview - Material 3

Question

I am starting to learn Compose UI and it seems that each time I use any color from MaterialTheme.colorScheme the previews only show the same color in previews.

So:

• for MaterialTheme.colorScheme.surface, it always shows White.
• for MaterialTheme.colorScheme.primary it always shows Purple.
• and so on...

Perhaps I've missed a step? Here's what my MainActivity's Theme looks like:

fun LearningComposeTheme(
    darkTheme: Boolean = false,
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colorScheme = colors,
        content = content
    )
}

private val DarkColorPalette = darkColorScheme(
    primary = ColorPrimaryDark,
    onPrimary = ColorOnPrimary,
    primaryContainer = ColorPrimaryContainerDark,
    onPrimaryContainer = ColorOnPrimary,
    inversePrimary = ColorInversePrimary,
    background = ColorPrimaryContainerDark,
    surface = ColorSurface,
    onSurface = ColorOnSurface,
    error = ColorError,
)

// For now dark and light themes are exactly same.
private val LightColorPalette = lightColorScheme(
    primary = ColorPrimaryDark,
    onPrimary = ColorOnPrimary,
    primaryContainer = ColorPrimaryContainerDark,
    onPrimaryContainer = ColorOnPrimary,
    inversePrimary = ColorInversePrimary,
    background = ColorPrimaryContainerDark,
    surface = ColorSurface,
    onSurface = ColorOnSurface,
    error = ColorError,
)

I've also updated my primary colors in my theme.xml too:

<style name="Theme.MyAppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryVariant">@color/colorPrimaryDark</item>
    <item name="colorOnPrimary">@color/white</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_700</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->
</style>

Yet, my search bar looks like this in the preview:

But this is what it's supposed to look like or currently looks like when I run my code on a device:

Here's the ComposeUI code:

Surface(
    modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight(),
    color = MaterialTheme.colorScheme.primary,
    contentColor = MaterialTheme.colorScheme.primary,
) {
...
}

Answer 1

Unfortunately, you didn't attach your function preview code, so I can't say for sure. However, I think that most likely you just did not indicate the theme in the preview.

For example, next code will give you the same result as on your Preview as it will use the default material colors:

@Preview
@Composable
fun SearchBarPreview(){
     SearchBar()
}

To see the result with your custom colors you need to use your LearningComposeTheme in the preview function:

@Preview
@Composable
fun SearchBarPreview(){
   LearningComposeTheme{
       SearchBar()
   }
}

To see preview for each colors scheme you can use PreviewParameter - https://stackoverflow.com/a/76588587/9881599