Ignacio Guerrero
Ignacio Guerrero

Reputation: 68

MaterialTheme showing a different colorScheme

For some reason, the preview shows a different palette than the one I have in Color.kt and Theme.kt. ie. Primary is Color(0xFFA43D00) in Color.kt, but #00658D in the Layout inspector.

I probably messed up something. I didn't like the default palette, so I went to Material Theme Builder and made a custom one. Exported as Jetpack Compose, opened the file, and copy/pasted the contents color information form the exported Theme.kt to the ui/theme/Theme.kt file (without touching anything else, like the package name or the Theme composable):

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,
    errorContainer = md_theme_light_errorContainer,
    onError = md_theme_light_onError,
    onErrorContainer = md_theme_light_onErrorContainer,
    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,
    outline = md_theme_light_outline,
    inverseOnSurface = md_theme_light_inverseOnSurface,
    inverseSurface = md_theme_light_inverseSurface,
    inversePrimary = md_theme_light_inversePrimary,
    surfaceTint = md_theme_light_surfaceTint,
    outlineVariant = md_theme_light_outlineVariant,
    scrim = md_theme_light_scrim,
)


private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
    secondary = md_theme_dark_secondary,
    onSecondary = md_theme_dark_onSecondary,
    secondaryContainer = md_theme_dark_secondaryContainer,
    onSecondaryContainer = md_theme_dark_onSecondaryContainer,
    tertiary = md_theme_dark_tertiary,
    onTertiary = md_theme_dark_onTertiary,
    tertiaryContainer = md_theme_dark_tertiaryContainer,
    onTertiaryContainer = md_theme_dark_onTertiaryContainer,
    error = md_theme_dark_error,
    errorContainer = md_theme_dark_errorContainer,
    onError = md_theme_dark_onError,
    onErrorContainer = md_theme_dark_onErrorContainer,
    background = md_theme_dark_background,
    onBackground = md_theme_dark_onBackground,
    surface = md_theme_dark_surface,
    onSurface = md_theme_dark_onSurface,
    surfaceVariant = md_theme_dark_surfaceVariant,
    onSurfaceVariant = md_theme_dark_onSurfaceVariant,
    outline = md_theme_dark_outline,
    inverseOnSurface = md_theme_dark_inverseOnSurface,
    inverseSurface = md_theme_dark_inverseSurface,
    inversePrimary = md_theme_dark_inversePrimary,
    surfaceTint = md_theme_dark_surfaceTint,
    outlineVariant = md_theme_dark_outlineVariant,
    scrim = md_theme_dark_scrim,
)

same with the Color.kt file

val md_theme_light_primary = Color(0xFFA43D00)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFFFDBCD)
val md_theme_light_onPrimaryContainer = Color(0xFF360F00)
val md_theme_light_secondary = Color(0xFF006782)
val md_theme_light_onSecondary = Color(0xFFFFFFFF)
val md_theme_light_secondaryContainer = Color(0xFFBBEAFF)
val md_theme_light_onSecondaryContainer = Color(0xFF001F29)
val md_theme_light_tertiary = Color(0xFF006B5A)
val md_theme_light_onTertiary = Color(0xFFFFFFFF)
val md_theme_light_tertiaryContainer = Color(0xFF79F8DC)
val md_theme_light_onTertiaryContainer = Color(0xFF00201A)
val md_theme_light_error = Color(0xFFBA1A1A)
val md_theme_light_errorContainer = Color(0xFFFFDAD6)
val md_theme_light_onError = Color(0xFFFFFFFF)
val md_theme_light_onErrorContainer = Color(0xFF410002)
val md_theme_light_background = Color(0xFFFFFBFF)
val md_theme_light_onBackground = Color(0xFF221B00)
val md_theme_light_surface = Color(0xFFFFFBFF)
val md_theme_light_onSurface = Color(0xFF221B00)
val md_theme_light_surfaceVariant = Color(0xFFF5DED6)
val md_theme_light_onSurfaceVariant = Color(0xFF53433E)
val md_theme_light_outline = Color(0xFF85736D)
val md_theme_light_inverseOnSurface = Color(0xFFFFF0C0)
val md_theme_light_inverseSurface = Color(0xFF3A3000)
val md_theme_light_inversePrimary = Color(0xFFFFB597)
val md_theme_light_shadow = Color(0xFF000000)
val md_theme_light_surfaceTint = Color(0xFFA43D00)
val md_theme_light_outlineVariant = Color(0xFFD8C2BA)
val md_theme_light_scrim = Color(0xFF000000)

val md_theme_dark_primary = Color(0xFFFFB597)
val md_theme_dark_onPrimary = Color(0xFF591D00)
val md_theme_dark_primaryContainer = Color(0xFF7D2D00)
val md_theme_dark_onPrimaryContainer = Color(0xFFFFDBCD)
val md_theme_dark_secondary = Color(0xFF60D4FE)
val md_theme_dark_onSecondary = Color(0xFF003545)
val md_theme_dark_secondaryContainer = Color(0xFF004D62)
val md_theme_dark_onSecondaryContainer = Color(0xFFBBEAFF)
val md_theme_dark_tertiary = Color(0xFF5ADBC0)
val md_theme_dark_onTertiary = Color(0xFF00382E)
val md_theme_dark_tertiaryContainer = Color(0xFF005144)
val md_theme_dark_onTertiaryContainer = Color(0xFF79F8DC)
val md_theme_dark_error = Color(0xFFFFB4AB)
val md_theme_dark_errorContainer = Color(0xFF93000A)
val md_theme_dark_onError = Color(0xFF690005)
val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
val md_theme_dark_background = Color(0xFF221B00)
val md_theme_dark_onBackground = Color(0xFFFFE264)
val md_theme_dark_surface = Color(0xFF221B00)
val md_theme_dark_onSurface = Color(0xFFFFE264)
val md_theme_dark_surfaceVariant = Color(0xFF53433E)
val md_theme_dark_onSurfaceVariant = Color(0xFFD8C2BA)
val md_theme_dark_outline = Color(0xFFA08D86)
val md_theme_dark_inverseOnSurface = Color(0xFF221B00)
val md_theme_dark_inverseSurface = Color(0xFFFFE264)
val md_theme_dark_inversePrimary = Color(0xFFA43D00)
val md_theme_dark_shadow = Color(0xFF000000)
val md_theme_dark_surfaceTint = Color(0xFFFFB597)
val md_theme_dark_outlineVariant = Color(0xFF53433E)
val md_theme_dark_scrim = Color(0xFF000000)


val seed = Color(0xFFF26419)
val Olivine = Color(0xFFA1C182)
val Sunglow = Color(0xFFFFCB3D)
val light_Olivine = Color(0xFF3F6918)
val light_onOlivine = Color(0xFFFFFFFF)
val light_OlivineContainer = Color(0xFFBFF290)
val light_onOlivineContainer = Color(0xFF0D2000)
val dark_Olivine = Color(0xFFA4D577)
val dark_onOlivine = Color(0xFF1A3700)
val dark_OlivineContainer = Color(0xFF295000)
val dark_onOlivineContainer = Color(0xFFBFF290)
val light_Sunglow = Color(0xFF775A00)
val light_onSunglow = Color(0xFFFFFFFF)
val light_SunglowContainer = Color(0xFFFFDF97)
val light_onSunglowContainer = Color(0xFF251A00)
val dark_Sunglow = Color(0xFFF2C031)
val dark_onSunglow = Color(0xFF3E2E00)
val dark_SunglowContainer = Color(0xFF5A4400)
val dark_onSunglowContainer = Color(0xFFFFDF97)

Just replaced the old color information with the new one. It feels like this is not the right way to do it though... Thank you in advanced for your help.

Upvotes: 1

Views: 1193

Answers (1)

SURYA S R
SURYA S R

Reputation: 566

Please check this answer. Same case.

You can remove the code responsible for dynamic colors in your theme.kt file.

To know more about Dynamic Colors, please refer this documentation page.

val darkTheme = isSystemInDarkTheme()
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
    // dynamicColor && darkTheme - > dynamicDarkColorScheme(LocalContext.current)
    // dynamicColor && !darkTheme - > dynamicLightColorScheme(LocalContext.current)
    darkTheme - > darkColorScheme
    else - > lightColorScheme
}

Upvotes: 2

Related Questions