关于Material Design配色的补充

[nt1r]

可以考虑把Material Design其他的色彩（primary, secondary, 各种container，on等等）都加上，Figma设计软件的官方插件可以自动生成这些色彩，并且导入十分方便。但我没试过compose multi-platform除了Windows之外的平台，不确定各平台的色彩是否统一。

@Stable
fun aniDarkColorTheme(): ColorScheme {
    PaletteTokens.run {
        return darkColorScheme(
            background = Neutral10,
            surface = Neutral20,
            surfaceVariant = NeutralVariant20,
            // 这里可以把其他的色彩都加上
        )
    }
}

@Stable
fun aniLightColorTheme(): ColorScheme = lightColorScheme(
    background = Color(0xfff1f2f4),
    surface = Color.White,
    surfaceVariant = Color.White,
    // 这里可以把其他的色彩都加上
)

[nt1r]

色彩导出的结果需要对multiplatform调整一下。

colors.kt

import androidx.compose.ui.graphics.Color

val primaryLight = Color(0xFF626200)
val onPrimaryLight = Color(0xFFFFFFFF)
val primaryContainerLight = Color(0xFFCAC95D)
val onPrimaryContainerLight = Color(0xFF373600)
val secondaryLight = Color(0xFF616036)
val onSecondaryLight = Color(0xFFFFFFFF)
val secondaryContainerLight = Color(0xFFE8E6B1)
val onSecondaryContainerLight = Color(0xFF4B4A23)
val tertiaryLight = Color(0xFF306B2C)
val onTertiaryLight = Color(0xFFFFFFFF)
val tertiaryContainerLight = Color(0xFF94D489)
val onTertiaryContainerLight = Color(0xFF003E06)
val errorLight = Color(0xFFBA1A1A)
val onErrorLight = Color(0xFFFFFFFF)
val errorContainerLight = Color(0xFFFFDAD6)
val onErrorContainerLight = Color(0xFF410002)
val backgroundLight = Color(0xFFFDF9ED)
val onBackgroundLight = Color(0xFF1C1C14)
val surfaceLight = Color(0xFFFDF9ED)
val onSurfaceLight = Color(0xFF1C1C14)
val surfaceVariantLight = Color(0xFFE6E3CD)
val onSurfaceVariantLight = Color(0xFF484738)
val outlineLight = Color(0xFF797866)
val outlineVariantLight = Color(0xFFCAC7B2)
val scrimLight = Color(0xFF000000)
val inverseSurfaceLight = Color(0xFF313128)
val inverseOnSurfaceLight = Color(0xFFF4F1E4)
val inversePrimaryLight = Color(0xFFCDCB5F)
val surfaceDimLight = Color(0xFFDDDACE)
val surfaceBrightLight = Color(0xFFFDF9ED)
val surfaceContainerLowestLight = Color(0xFFFFFFFF)
val surfaceContainerLowLight = Color(0xFFF7F4E7)
val surfaceContainerLight = Color(0xFFF1EEE1)
val surfaceContainerHighLight = Color(0xFFECE8DC)
val surfaceContainerHighestLight = Color(0xFFE6E2D6)

val primaryDark = Color(0xFFE5E374)
val onPrimaryDark = Color(0xFF323200)
val primaryContainerDark = Color(0xFFBAB94F)
val onPrimaryContainerDark = Color(0xFF2B2A00)
val secondaryDark = Color(0xFFCBC996)
val onSecondaryDark = Color(0xFF32320D)
val secondaryContainerDark = Color(0xFF3F3F19)
val onSecondaryContainerDark = Color(0xFFD6D4A0)
val tertiaryDark = Color(0xFFAEEFA1)
val onTertiaryDark = Color(0xFF003A05)
val tertiaryContainerDark = Color(0xFF86C47B)
val onTertiaryContainerDark = Color(0xFF003104)
val errorDark = Color(0xFFFFB4AB)
val onErrorDark = Color(0xFF690005)
val errorContainerDark = Color(0xFF93000A)
val onErrorContainerDark = Color(0xFFFFDAD6)
val backgroundDark = Color(0xFF14140D)
val onBackgroundDark = Color(0xFFE6E2D6)
val surfaceDark = Color(0xFF14140D)
val onSurfaceDark = Color(0xFFE6E2D6)
val surfaceVariantDark = Color(0xFF484738)
val onSurfaceVariantDark = Color(0xFFCAC7B2)
val outlineDark = Color(0xFF93917E)
val outlineVariantDark = Color(0xFF484738)
val scrimDark = Color(0xFF000000)
val inverseSurfaceDark = Color(0xFFE6E2D6)
val inverseOnSurfaceDark = Color(0xFF313128)
val inversePrimaryDark = Color(0xFF626200)
val surfaceDimDark = Color(0xFF14140D)
val surfaceBrightDark = Color(0xFF3A3931)
val surfaceContainerLowestDark = Color(0xFF0F0E08)
val surfaceContainerLowDark = Color(0xFF1C1C14)
val surfaceContainerDark = Color(0xFF202018)
val surfaceContainerHighDark = Color(0xFF2B2A22)
val surfaceContainerHighestDark = Color(0xFF36352D)

theme.kt

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Typography
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable

private val lightScheme = lightColorScheme(
    primary = primaryLight,
    onPrimary = onPrimaryLight,
    primaryContainer = primaryContainerLight,
    onPrimaryContainer = onPrimaryContainerLight,
    secondary = secondaryLight,
    onSecondary = onSecondaryLight,
    secondaryContainer = secondaryContainerLight,
    onSecondaryContainer = onSecondaryContainerLight,
    tertiary = tertiaryLight,
    onTertiary = onTertiaryLight,
    tertiaryContainer = tertiaryContainerLight,
    onTertiaryContainer = onTertiaryContainerLight,
    error = errorLight,
    onError = onErrorLight,
    errorContainer = errorContainerLight,
    onErrorContainer = onErrorContainerLight,
    background = backgroundLight,
    onBackground = onBackgroundLight,
    surface = surfaceLight,
    onSurface = onSurfaceLight,
    surfaceVariant = surfaceVariantLight,
    onSurfaceVariant = onSurfaceVariantLight,
    outline = outlineLight,
    outlineVariant = outlineVariantLight,
    scrim = scrimLight,
    inverseSurface = inverseSurfaceLight,
    inverseOnSurface = inverseOnSurfaceLight,
    inversePrimary = inversePrimaryLight,
    surfaceDim = surfaceDimLight,
    surfaceBright = surfaceBrightLight,
    surfaceContainerLowest = surfaceContainerLowestLight,
    surfaceContainerLow = surfaceContainerLowLight,
    surfaceContainer = surfaceContainerLight,
    surfaceContainerHigh = surfaceContainerHighLight,
    surfaceContainerHighest = surfaceContainerHighestLight,
)

private val darkScheme = darkColorScheme(
    primary = primaryDark,
    onPrimary = onPrimaryDark,
    primaryContainer = primaryContainerDark,
    onPrimaryContainer = onPrimaryContainerDark,
    secondary = secondaryDark,
    onSecondary = onSecondaryDark,
    secondaryContainer = secondaryContainerDark,
    onSecondaryContainer = onSecondaryContainerDark,
    tertiary = tertiaryDark,
    onTertiary = onTertiaryDark,
    tertiaryContainer = tertiaryContainerDark,
    onTertiaryContainer = onTertiaryContainerDark,
    error = errorDark,
    onError = onErrorDark,
    errorContainer = errorContainerDark,
    onErrorContainer = onErrorContainerDark,
    background = backgroundDark,
    onBackground = onBackgroundDark,
    surface = surfaceDark,
    onSurface = onSurfaceDark,
    surfaceVariant = surfaceVariantDark,
    onSurfaceVariant = onSurfaceVariantDark,
    outline = outlineDark,
    outlineVariant = outlineVariantDark,
    scrim = scrimDark,
    inverseSurface = inverseSurfaceDark,
    inverseOnSurface = inverseOnSurfaceDark,
    inversePrimary = inversePrimaryDark,
    surfaceDim = surfaceDimDark,
    surfaceBright = surfaceBrightDark,
    surfaceContainerLowest = surfaceContainerLowestDark,
    surfaceContainerLow = surfaceContainerLowDark,
    surfaceContainer = surfaceContainerDark,
    surfaceContainerHigh = surfaceContainerHighDark,
    surfaceContainerHighest = surfaceContainerHighestDark,
)

@Composable
fun AppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
  val colorScheme = when {
      darkTheme -> darkScheme
      else -> lightScheme
  }

  MaterialTheme(
    colorScheme = colorScheme,
    typography = Typography(),
    content = content,
  )
}

大致效果概念图：

[NeKoOuO]

動態取色真的很爽

[nt1r]

動態取色真的很爽

壁纸自动取色，淦，爽爆。

[Him188]

我其实只调换了surface和background颜色，可能还改了surface变成纯白/黑，surface以前应该是轻微紫色而所有我给他们看过的人都觉得那不太好看...

所以我就参考现代其他软件把它们微调了一下，其他颜色就仍然是M3默认的

不过做自定义配色确实是要做的