Compose主题切换报错Type mismatch：期望Color类型，实际传入Any

问题重现 #

开发Jetpack Compose计算器应用时，实现明暗主题切换遇到错误：

Type mismatch. Required: Color Found: Any

顶层代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CalculatorTheme {
                val viewModel = viewModel<CalculatorViewModel>()
                val state = viewModel.state
                val previousState = viewModel.previousState
                val buttonSpacing = 10.dp
                val isDarkTheme = isSystemInDarkTheme()
                val colors = if (isDarkTheme) DarkThemeColors else LightThemeColors
                CalculatorApp(
                    state = viewModel.state,
                    previousState = viewModel.previousState,
                    buttonSpacing = buttonSpacing,
                    colors = colors,
                    viewModel = viewModel
                )
            }
        }
    }
}

@Composable
fun CalculatorApp(
    state: CalculatorState,
    previousState: CalculatorState,
    buttonSpacing: Dp,
    colors: Color,
    viewModel: CalculatorViewModel
) {}

颜色定义代码（Color.kt） #

object DarkThemeColors {
    val number_buttons = Color(0xFF98c1d9)
    val top_row_buttons = Color(0xFF3d5a80)
    val background =  Color(0xFF293241)
    val operation_buttons = Color(0xFFee6c4d)
}

object LightThemeColors {
    val number_buttons = Color(0xFFf5ebe0)
    val top_row_buttons = Color(0xFFd5bdaf)
    val background =  Color(0xFFedede9)
    val operation_buttons = Color(0xFFd6ccc2)
}

错误原因 #

1. DarkThemeColors和LightThemeColors是颜色集合对象，包含多个Color类型属性，本身不是单个Color值。
2. CalculatorApp的colors参数被错误定义为Color类型，但实际传入的是整个颜色集合对象，导致类型不匹配。

修复方案 #

1. 定义统一的主题颜色数据类 #

创建数据类封装所有主题颜色，确保明暗主题结构一致：

import androidx.compose.ui.graphics.Color

data class CalculatorThemeColors(
    val numberButtons: Color,
    val topRowButtons: Color,
    val background: Color,
    val operationButtons: Color
)

将原有颜色对象替换为该数据类的实例：

val DarkThemeColors = CalculatorThemeColors(
    numberButtons = Color(0xFF98c1d9),
    topRowButtons = Color(0xFF3d5a80),
    background = Color(0xFF293241),
    operationButtons = Color(0xFFee6c4d)
)

val LightThemeColors = CalculatorThemeColors(
    numberButtons = Color(0xFFf5ebe0),
    topRowButtons = Color(0xFFd5bdaf),
    background = Color(0xFFedede9),
    operationButtons = Color(0xFFd6ccc2)
)

2. 修正CalculatorApp的参数类型 #

将colors参数类型从Color改为自定义的CalculatorThemeColors：

@Composable
fun CalculatorApp(
    state: CalculatorState,
    previousState: CalculatorState,
    buttonSpacing: Dp,
    colors: CalculatorThemeColors, // 修正类型
    viewModel: CalculatorViewModel
) {
    // UI中使用颜色时直接调用对应属性
    Box(modifier = Modifier.fillMaxSize().background(colors.background)) {
        // 示例：数字按钮背景色
        Button(
            onClick = {},
            colors = ButtonDefaults.buttonColors(containerColor = colors.numberButtons)
        ) {
            Text("1")
        }
    }
}

3. 调整MainActivity中的调用逻辑 #

保持主题判断逻辑，用remember缓存颜色对象避免不必要重组：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CalculatorTheme {
                val viewModel = viewModel<CalculatorViewModel>()
                val buttonSpacing = 10.dp
                val isDarkTheme = isSystemInDarkTheme()
                val colors = remember(isDarkTheme) {
                    if (isDarkTheme) DarkThemeColors else LightThemeColors
                }
                CalculatorApp(
                    state = viewModel.state,
                    previousState = viewModel.previousState,
                    buttonSpacing = buttonSpacing,
                    colors = colors,
                    viewModel = viewModel
                )
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者1595_SHREYA MOHANTY