如何为Material 3应用配置纯黑白主题(含明暗模式)
在Material 3中实现明暗模式下的纯黑白主题
Material 3的colorSchemeSeed是基于种子色生成完整调色板的机制,但黑色属于无彩色,系统无法从中提取足够的色彩特征来生成自定义调色板,因此会 fallback 到默认的紫色配色。要实现纯黑白主题,你需要直接自定义ColorScheme,而非依赖种子色生成。
实现步骤
- 分别为明、暗模式定义纯黑白的
ColorScheme
直接指定所有核心颜色为黑或白,覆盖系统默认的调色板生成逻辑:
import androidx.compose.material3.ColorScheme import androidx.compose.material3.Brightness import androidx.compose.ui.graphics.Color // 明模式:白色背景 + 黑色文字/元素 val LightBlackWhiteScheme = ColorScheme( primary = Color.White, onPrimary = Color.Black, secondary = Color.White, onSecondary = Color.Black, background = Color.White, onBackground = Color.Black, surface = Color.White, onSurface = Color.Black, error = Color.Black, // 若需纯黑白风格,错误色也可设为黑/白 onError = Color.White, brightness = Brightness.Light ) // 暗模式:黑色背景 + 白色文字/元素 val DarkBlackWhiteScheme = ColorScheme( primary = Color.Black, onPrimary = Color.White, secondary = Color.Black, onSecondary = Color.White, background = Color.Black, onBackground = Color.White, surface = Color.Black, onSurface = Color.White, error = Color.White, onError = Color.Black, brightness = Brightness.Dark )
- 在应用主题中使用自定义的
ColorScheme
替换默认的colorSchemeSeed配置,直接传入自定义的配色方案:
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Typography import androidx.compose.material3.Shapes import androidx.compose.foundation.isSystemInDarkTheme @Composable fun BlackWhiteAppTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colorScheme = if (darkTheme) DarkBlackWhiteScheme else LightBlackWhiteScheme MaterialTheme( colorScheme = colorScheme, typography = Typography(), shapes = Shapes(), content = content ) }
- 全局应用主题
在应用入口处使用这个自定义主题包裹所有内容:
@Composable fun MyApp() { BlackWhiteAppTheme { // 应用内容 } }
这样配置后,应用在明暗模式下都会严格使用纯黑白配色,所有Material 3组件都会自动适配这套自定义配色方案。
内容的提问来源于stack exchange,提问作者Nick Khotenko
相关产品推荐
相关产品推荐

