Firebase UI自定义Theme.MaterialComponents.DayNight深色模式适配失效

现有实现方式 #

通过如下Kotlin代码为Firebase Auth UI绑定自定义主题：

val builder = AuthUI.getInstance().createSignInIntentBuilder()
            .setTheme(R.style.AuthStyle)
            .setLogo(R.mipmap.ic_launcher)
            .setIsSmartLockEnabled(true)
            .setAvailableProviders(getProviderList())
builder.setTosAndPrivacyPolicyUrls(
    "https://firebase.google.com/terms/",
    "https://firebase.google.com/policies/analytics"
)

异常表现 #

• 深色模式下 android:windowBackground 配置完全不生效
• 按钮的 backgroundTint 属性、materialThemeOverlay 配置无法正常工作
• 按钮着色逻辑仅在浅色模式下生效，且直接读取 AuthStyle 中定义的 colorPrimary 值，不会识别主题覆盖层配置的自定义色值
• 所有在 values、values-night 目录下分目录配置的适配色值，均未被手机号认证模块读取；即使拆分不同资源目录下的两份 AuthStyle 主题做深浅色适配，深色模式下的配置仍然无法生效

主题配置详情 #

自定义认证主题 #

<style name="AuthStyle" parent="Theme.MaterialComponents.DayNight">
    <!-- 覆盖ActionBar和状态栏配色 -->
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

    <item name="android:colorControlNormal">@color/colorAccent</item> <!-- 下拉框、未聚焦输入框下划线颜色 -->
    <item name="android:colorFocusedHighlight">@color/colorAccent</item>

    <!-- MaterialComponent主题下的Toolbar标题样式 -->
    <item name="toolbarStyle">@style/AppToolbar</item>

    <item name="materialButtonStyle">@style/AuthButton</item> <!-- MaterialComponent主题下Firebase UI按钮的自定义样式 -->

    <!-- 页面主背景覆盖 -->
    <item name="android:windowBackground">@color/whitePrimaryDark</item>

    <!-- 描述文本颜色 -->
    <item name="android:textColorTertiary">@color/primaryDarkWhite</item>
    <!-- <item name="android:textColorPrimary">@color/colorPrimary</item> -->

    <!-- 验证码重发文本颜色覆盖 -->
    <item name="android:textColorSecondary">?android:textColorTertiary</item> <!-- MaterialComponent主题下会同时影响下拉框条目文本颜色 -->
</style>

认证页按钮样式 #

<!-- 应用主主题为MaterialComponents时的扩展按钮样式 -->
<style name="AuthButton" parent="Widget.MaterialComponents.Button">
    <item name="android:minHeight">48dip</item>
    <item name="android:minWidth">64dip</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@color/whitePrimaryDark</item>
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button</item>
</style>

按钮主题覆盖层 #

<style name="ThemeOverlay.App.Button" parent="">
    <item name="colorPrimary">@color/primaryDarkAccent</item>
</style>

自定义颜色映射规则 #

• primaryDarkAccent：浅色模式下映射为 colorPrimaryDark，深色模式下映射为 colorAccent
• whitePrimaryDark：浅色模式下映射为 @android:color/white，深色模式下映射为 colorPrimaryDark
• primaryDarkWhite：浅色模式下映射为 colorPrimaryDark，深色模式下映射为 @android:color/white

根因说明 #

Firebase Auth UI 22.0.0及以上版本存在主题解析优先级问题：

1. 模块内部会优先加载内置的 FirebaseUI.authTheme 基础主题，该主题默认关闭了Night Mode资源匹配逻辑，强制读取默认values目录下的资源值
2. 通过 setTheme() 传入的自定义主题，仅在浅色模式下会作为父主题覆盖部分属性；深色模式下模块会直接绕过传入的自定义主题，加载内置的深色模式默认值
3. 自定义按钮样式中嵌套的 materialThemeOverlay 优先级低于模块内置按钮样式的硬编码属性，无法覆盖按钮的背景着色逻辑

可落地的修复方案 #

• 将自定义认证主题的父级从 Theme.MaterialComponents.DayNight 改为继承Firebase UI提供的 ThemeOverlay.FirebaseUI.DayNight，确保自定义主题被纳入模块的正常解析链路
• 移除按钮样式中独立的 materialThemeOverlay 配置，直接在 AuthButton 样式中设置 backgroundTint 为对应的自适应色值，绕开模块内部的主题覆盖层优先级判断
• 不要依赖分目录的values-night资源做适配，在拉起认证页面前手动调用 AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)，强制模块跟随系统的Night Mode配置
• 针对windowBackground失效问题，不要使用通用的 android:windowBackground 属性，直接给自定义主题设置Firebase UI预留的 firebaseUIWindowBackground 属性值为自适应背景色，这是模块专门开放的背景覆盖入口

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