1

I use dynamic theming in my jetpack compose app, yet all the colors are just too dark. Just look at my top app bar. How do I get access to lighter variations of colorScheme, for example my primary color?

topbar

Reza Hajianpour
  • 707
  • 1
  • 10
  • 21

2 Answers2

2

If you look at the dynamicLightColorScheme() function source code, you can see what's going on there. They are creating Dynamic tonal palette, which is internal, but eventually you can get to the code you can use in your app. The color is created like this:

val context = LocalContext.current
val color = Color(context.resources.getColor(colorId, context.theme)

Now you just need that colorId. You can take that from the dynamicTonalPalette() source code. For example, the default primary color for light dynamic theme is android.R.color.system_accent1_600. If you want lighter color, you can try android.R.color.system_accent1_300.

Jan Bína
  • 3,447
  • 14
  • 16
  • 1
    Thank you, this is what I was looking for. Sad to see how poorly-documented and user-unfriendly this is. This is hacking the code. – Reza Hajianpour May 16 '23 at 19:05
1

You can use:

   MaterialTheme.colorScheme.primary

to access your current theme primary color.

Also make sure the device your testing device/emulator isn't in dark mode as the application will automatically switch to the dark color scheme if it is.

Here's a TopAppBar example with Material theme colors:

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun testingStuff() {
    TopAppBar(
        title = {
            Text(text = "Doing Stuff",
                color = MaterialTheme.colorScheme.onPrimaryContainer,
                fontStyle = FontStyle.Normal
            )
        },
        colors = TopAppBarDefaults.mediumTopAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
            navigationIconContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
            actionIconContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
            scrolledContainerColor = MaterialTheme.colorScheme.onPrimaryContainer


        ),
        navigationIcon = {
            IconButton({ /*do stuff*/ }) {
                Icon(
                    imageVector= Icons.Default.Menu,
                    contentDescription = "Toggle drawer"
                )
            }
        }
    )
}

Also you can customize your theme colors by editing the colorSchemes in Theme.kt file, for example:

private val LightColorScheme= lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    onPrimaryContainer = md_theme_light_onPrimaryContainer,
    secondary = md_theme_light_secondary,
    onSecondary = md_theme_light_onSecondary,
    secondaryContainer = md_theme_light_secondaryContainer,
    onSecondaryContainer = md_theme_light_onSecondaryContainer,
    tertiary = md_theme_light_tertiary,
    onTertiary = md_theme_light_onTertiary,
    tertiaryContainer = md_theme_light_tertiaryContainer,
    onTertiaryContainer = md_theme_light_onTertiaryContainer,
    error = md_theme_light_error,
    onError = md_theme_light_onError,
    errorContainer = md_theme_light_errorContainer,
    onErrorContainer = md_theme_light_onErrorContainer,
    outline = md_theme_light_outline,
    background = md_theme_light_background,
    onBackground = md_theme_light_onBackground,
    surface = md_theme_light_surface,
    onSurface = md_theme_light_onSurface,
    surfaceVariant = md_theme_light_surfaceVariant,
    onSurfaceVariant = md_theme_light_onSurfaceVariant,
    inverseSurface = md_theme_light_inverseSurface,
    inverseOnSurface = md_theme_light_inverseOnSurface,
    inversePrimary = md_theme_light_inversePrimary,
    surfaceTint = md_theme_light_surfaceTint,
    outlineVariant = md_theme_light_outlineVariant,
    scrim = md_theme_light_scrim,
)

the colors above are just values in my Color.kt file, you can customize them however you like.

you can learn more about Material 3 colors and theming from:

M3 dynamic colors

M3 custom colors

I hope this helps , feel free to ask any questions

Pisces
  • 331
  • 3
  • 4