如何在Jetpack Compose预览模式中使用自定义主题？

以下是几个可行的解决步骤，帮你在预览模式下正常使用自定义主题：

• 给预览函数包裹完整的主题层级
  Compose预览默认不会自动加载你的自定义主题配置，所以每个@Preview函数都需要手动包裹包含CompositionLocalProvider的主题结构。如果已经把主题封装成了单独的@Composable函数（比如MyAppTheme），直接在预览里调用它即可：

  @Preview(showBackground = true)
  @Composable
  fun MyScreenLightPreview() {
      MyAppTheme(isDarkTheme = false) {
          MyCustomScreen()
      }
  }
  
  @Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
  @Composable
  fun MyScreenDarkPreview() {
      MyAppTheme(isDarkTheme = true) {
          MyCustomScreen()
      }
  }
  

  要是还没封装主题，直接在预览里写CompositionLocalProvider也可以，把对应的亮色/暗色AppResources实例传进去。

• 确认CompositionLocal的声明方式
  检查你的LocalAppResources是否用正确的API声明：

  // 主题资源一般用staticCompositionLocalOf，适合不会动态变化的场景
  val LocalAppResources = staticCompositionLocalOf<AppResources> {
      error("AppResources未提供，请确保在CompositionLocalProvider中传入实例")
  }
  

  避免错误使用compositionLocalOf（它适合可能动态变化的状态），否则可能导致预览出现异常。

• 显式指定预览的主题模式
  预览有时不会自动识别系统的明暗模式，在@Preview注解里通过uiMode参数强制指定：

  • 亮色模式：默认无需额外设置，或者用uiMode = Configuration.UI_MODE_NIGHT_NO
  • 暗色模式：uiMode = Configuration.UI_MODE_NIGHT_YES

• 清理缓存并重建项目
  如果上述操作后预览还是不生效，试试执行Build > Clean Project，然后Build > Rebuild Project——Compose预览的缓存偶尔会导致主题加载异常，清理后通常能解决。

• 检查Android Studio版本
  确保你使用的是较新的稳定版Android Studio（比如Electric Eel及以上），旧版本对自定义CompositionLocal的预览支持存在已知bug，升级后能避免很多问题。

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