第4章 暗黑模式支付主题适配：Surface色调映射、onSurface对比度调整、支付按钮悬浮效果

4.1 原理：暗黑模式下的色调映射与对比度约束

暗黑模式（Dark Theme）并非简单地将背景置黑，而是需要在低明度背景下保持视觉层次与可读性。Material 3 采用 色调映射（Tonal Mapping） 策略：将亮色主题中定义的颜色通过明度（L*）和色度（Chroma）变换，生成适合暗色背景的替代色。对于支付场景，关键节点包括：

支付按钮悬浮效果依赖 State Layer：在按钮表面叠加半透明色层（hover/focus/pressed），通过色调与 Alpha 混合实现交互反馈。暗黑模式下需确保悬浮色层不掩没按钮文字，且相对于背景有足够视觉强度。

4.2 实现流程：从设计 到代码注入

1. 定义暗黑模式颜色 ：基于亮色主题通过算法或手动调色得到暗黑版本 Surface、onSurface、Primary 等。
2. 配置 Theme 对象：在 Compose 中创建 MaterialTheme 的暗黑分支，或使用 CSS 自定义属性切换。
3. 调整 onSurface 对比度：用亮度公式验证 L* 差值，确保 ≥ 4.5。必要时微调明度。
4. 支付按钮悬浮色层：定义 hover/focus/pressed 状态的 Alpha 值（如 hover: 8% Primary, focus: 12%, pressed: 16%），并映射到暗黑模式。
5. 集成测试：在真机暗黑模式下检验支付流程中所有文字、按钮、字段的可读性与交互响应。

4.3 核心代码与配置

4.3.1 Jetpack Compose 暗黑主题配置

// 颜色定义文件 Colors.kt
import androidx.compose.ui.graphics.Color

// 亮色 (Light)
val LightSurface = Color(0xFFFFFBFE)
val LightOnSurface = Color(0xFF1C1B1F)
val LightPrimary = Color(0xFF6750A4)
val LightError = Color(0xFFB3261E)

// 暗黑 (Dark) —— 经过色调映射后
val DarkSurface = Color(0xFF121116)        // L* ≈ 8
val DarkOnSurface = Color(0xFFE6E1E5)      // L* ≈ 90
val DarkPrimary = Color(0xFFD0BCFF)        // L* ≈ 75
val DarkError = Color(0xFFF2B8B5)          // L* ≈ 78

// 暗黑模式下按钮状态层 Alpha（百分比）
object StateLayerAlpha {
    const val Hover   = 0.08f   // 8%
    const val Focus   = 0.12f   // 12%
    const val Pressed = 0.16f   // 16%
}

4.3.2 MaterialTheme 暗黑分支设置

// Theme.kt
@Composable
fun PaymentTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        darkColorScheme(
            primary   = DarkPrimary,
            onPrimary = DarkSurface,
            surface   = DarkSurface,
            onSurface = DarkOnSurface,
            error     = DarkError,
            onError   = DarkSurface
        )
    } else {
        lightColorScheme(
            primary   = LightPrimary,
            onPrimary = LightSurface,
            surface   = LightSurface,
            onSurface = LightOnSurface,
            error     = LightError,
            onError   = LightSurface
        )
    }
    MaterialTheme(
        colorScheme = colors,
        content     = content
    )
}

4.3.3 支付按钮悬浮效果实现

// PaymentButton.kt
@Composable
fun PaymentButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    text: String = "确认支付"
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isHovered by interactionSource.collectIsHoveredAsState()
    val isPressed by interactionSource.collectIsPressedAsState()

    val containerColor = MaterialTheme.colorScheme.primary
    val stateLayerColor = MaterialTheme.colorScheme.onPrimary.copy(
        alpha = when {
            isPressed -> StateLayerAlpha.Pressed
            isHovered -> StateLayerAlpha.Hover
            else      -> 0f   // 默认无叠加
        }
    )

    Button(
        onClick         = onClick,
        modifier        = modifier,
        enabled         = enabled,
        interactionSource = interactionSource,
        colors = ButtonDefaults.buttonColors(
            containerColor = containerColor
        ),
        contentPadding = PaddingValues(horizontal = 24.dp, vertical = 12.dp)
    ) {
        // 叠加状态层
        Box(Modifier.fillMaxSize().background(stateLayerColor))
        Text(
            text        = text,
            color       = MaterialTheme.colorScheme.onPrimary,
            style       = MaterialTheme.typography.labelLarge
        )
    }
}

4.4 对比度调试与工具

部署前需验证实际渲染对比度。推荐使用以下方法与命令：

4.5 暗黑模式 Surface 色调映射流程图

4.6 部署与稳定性要点

• 组件级测试：在暗黑模式下验证每个支付按钮、输入框、错误提示的对比度与悬浮反馈。
• 色彩 统一管理：使用 Color.kt 或 theme.xml 集中定义，避免硬编码颜色值。
• 性能优化：暗黑模式下按钮状态层使用 Alpha 混合而非实时重绘，不影响帧率。注意 MutableInteractionSource 的复用避免泄漏。
• 多设备适配：不同屏幕峰值亮度与色域会影响暗黑效果，建议在 OLED 与 LCD 设备上分别测试 Surface 色阶的表现。