Jetpack compose material3 not picking up themes

Question

I am trying to set up a new project with jetpack compose material design 3 but I can't get the themes working, the screen is always showing the default android colors.

Here is my MaterialTheme():

import androidx.compose.material3.MaterialTheme

@Composable
fun AppTheme(
    darkTheme: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = if (darkTheme) {
        DarkColorScheme
    } else {
        LightColorScheme
    }

    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}

This is the colorSchemes:

import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

private val DarkColorScheme = darkColorScheme(
    primary = DarkPrimary,
    secondary = DarkSecondary,
    background = Color.Black,
    surface = DarkBackground,
    onPrimary = Color.DarkGray,
    onSecondary = Color.White,
    onBackground = Color.White,
    onSurface = Color.White
)

private val LightColorScheme = lightColorScheme(
    primary = LightPrimary,
    secondary = LightSecondary,
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black
)

Here is an example of some of the colors:

import androidx.compose.ui.graphics.Color

val DarkBackground = Color(0xFF363636)
val DarkPrimary = Color(0xFFaac3e1)

Finally, this is how I am using my theme in MainActivity.kt:

  @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            AppTheme {
                //App content...
            }
        }
    }

But when I launch the app I only see the default android app colors, this screenshot is from the app with dark mode on (it is exactly the same without dark mode):

This sign in page just contains input, text and button fields, do I need to add something for the theme to be found on the app content I pass into the theme on the main activity?

Any help is appreciated, apologies if I am missing something obvious!!

Answer 1

As @ianhannibllake mentioned in his comment. If you are migrating from Material 2 to Material 3 make sure you also remove all Material 2 elements from your UI (Text, Button etc.). Ideally just remove the Material 2 dependency if you can.