MaterialTheme 显示不同的 colorScheme

huangapple go评论80阅读模式
英文:

MaterialTheme showing a different colorScheme

问题

由于某种原因,预览显示的调色板与我在Color.kt和Theme.kt中的调色板不同。即在Color.kt中,Primary是Color(0xFFA43D00),但在Layout inspector中是#00658D。

我可能搞错了什么。我不喜欢默认的调色板,所以我去了Material Theme Builder,制作了一个自定义的调色板。导出为Jetpack Compose,打开文件,然后将导出的Theme.kt文件中的颜色信息复制/粘贴到ui/theme/Theme.kt文件中(不触碰其他任何内容,比如包名称或Theme组件):

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,
)

同样,Color.kt文件也是一样的:

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(0xFFFFE

<details>
<summary>英文:</summary>

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&#39;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.
</details>
# 答案1
**得分**: 2
请检查这个[答案](https://stackoverflow.com/a/75033839/20918983)。同样的情况。
您可以在您的theme.kt文件中删除负责动态颜色的代码。
要了解更多关于动态颜色的信息,请参阅此[文档](https://developer.android.com/jetpack/compose/designsystems/material3#dynamic_color_schemes)页面。
```kotlin
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
}
英文:

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 &gt;= Build.VERSION_CODES.S
val colors = when {
// dynamicColor &amp;&amp; darkTheme - &gt; dynamicDarkColorScheme(LocalContext.current)
// dynamicColor &amp;&amp; !darkTheme - &gt; dynamicLightColorScheme(LocalContext.current)
darkTheme - &gt; darkColorScheme
else - &gt; lightColorScheme
}

huangapple
  • 本文由 发表于 2023年1月9日 01:54:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/75050113.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定