Flutter中如何使用Material 3的Surface tones表面色调？

• 直接提取Figma颜色值硬编码（快速解决）

  打开Figma的Material Theme Builder面板，找到Surface tones里的"Surface at +1"，复制它的十六进制颜色码，在主题配置中手动添加自定义颜色属性：

  // Android Compose 示例
  val LightColorScheme = lightColorScheme(
      primary = Color(0xFF6750A4),
      surface = Color(0xFFFFFBFE),
      // 手动添加Surface at +1的颜色
      surface1 = Color(0xFFF7F2FA),
      // 同理添加surface2/surface3等
  )
  

  之后在UI组件中直接调用colorScheme.surface1即可使用该颜色。

• 用Material 3工具函数动态生成（推荐，适配主题变化）
  Material 3提供了adjustTone（调整色调）和harmonize（与主色调和谐化）工具函数，可动态生成对应Surface tones：

  import androidx.compose.material3.Color
  import androidx.compose.material3.adjustTone
  import androidx.compose.material3.harmonize
  import androidx.compose.material3.lightColorScheme
  
  // 扩展ColorScheme，添加Surface tones属性
  val ColorScheme.surface1: Color
      get() = surface.adjustTone(10).harmonize(primary)
  val ColorScheme.surface2: Color
      get() = surface.adjustTone(20).harmonize(primary)
  // 按需添加更多tone等级
  
  // 主题配置中直接使用扩展属性
  val LightColorScheme = lightColorScheme(
      primary = Color(0xFF6750A4),
      surface = Color(0xFFFFFBFE)
  )
  

  注：adjustTone的参数值对应Figma中的tone偏移量，比如+1对应偏移10，可根据Figma中的tone数值调整参数。

• 修正harmonizeWith的用法
  若之前使用harmonizeWith未达预期，需注意它是针对整个调色板的全局和谐化，而非单个颜色。正确用法示例：

  val primaryPalette = hsl(262, 34, 47) // 主色调的HSL值
  val surfacePalette = hsl(0, 0, 98) // 基础surface的HSL值
  val harmonizedSurfacePalette = surfacePalette.harmonizeWith(primaryPalette)
  

  但针对单个Surface tone，还是使用harmonize函数针对具体颜色调整更精准。

• 检查Figma导出设置
  确认在Figma的Material Theme Builder中，是否开启了导出扩展Surface tones的选项。部分情况下，默认导出仅包含基础Material 3颜色属性，需手动选择导出所有色调变体。

内容的提问来源于stack exchange，提问作者bahadir arslan