如何高效自定义theme.xml与theme.xml(night)、主副品牌色用途及深浅主题切换

1. theme.xml与theme.xml(night)的核心差异 #

• 生效场景不同：theme.xml存放在res/values/目录下，是系统未触发暗黑模式时的默认主题配置，在日间/浅色模式下生效；theme.xml(night)存放在res/values-night/目录下，系统开启暗黑模式或者应用主动切换到深色主题时自动生效
• 加载逻辑不同：两个文件中定义的同名主题样式会根据当前模式自动匹配加载，通常会保持两个文件中主题属性键完全一致，仅修改对应的色值、样式参数适配深浅模式的视觉规范
• 优先级不同：当系统处于深色模式时，values-night下的配置会覆盖values下的同名配置，无需额外代码做分支判断

2. 主题颜色属性的具体用途 #

• colorPrimary：应用的主品牌色，核心控件（比如顶部导航栏、悬浮按钮、主色调按钮等）默认会复用这个色值，是整个应用视觉辨识度最高的颜色
• colorPrimaryVariant：主色的变体，通常为同色系更深/更浅的色值，最常见的用途是作为状态栏、顶部AppBar的背景色
• colorOnPrimary：绘制在主色之上的内容色，比如主色按钮上的文字、图标颜色，要求和主色有足够对比度保证可读性
• colorSecondary：辅助品牌色，用于突出需要差异化的次要交互元素，比如选中态的单选框、复选框、进度条、输入框高亮边框等
• colorSecondaryVariant：辅助色的变体，和主色变体逻辑一致，用于辅助色的深浅适配场景
• colorOnSecondary：绘制在辅助色之上的内容色，同样需要和辅助色有足够对比度

3. 深浅主题切换实现与自定义技巧 #

3.1 修正后的主题配置 #

你提供的themes.xml(night)存在颜色对比度问题，On系列颜色和主色重叠会导致内容不可见，修正后的配置如下：

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.App" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_200</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/black</item> <!-- 修正：深色模式主色为浅紫色，内容用黑色保证可读性 -->
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item> <!-- 修正：和onPrimary逻辑一致 -->
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    </style>
</resources>

3.2 动态切换主题代码示例 #

切换主题的代码需要在setContentView之前调用才会生效，建议把选中的主题模式存在本地存储中，每次应用启动时提前读取设置：

Java 实现

// 主题模式可选值：
// AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM：跟随系统设置
// AppCompatDelegate.MODE_NIGHT_NO：强制浅色模式
// AppCompatDelegate.MODE_NIGHT_YES：强制深色模式
public void switchTheme(int mode) {
    AppCompatDelegate.setDefaultNightMode(mode);
    // 重启当前Activity让配置生效
    recreate();
}

Kotlin 实现

fun switchTheme(mode: Int) {
    AppCompatDelegate.setDefaultNightMode(mode)
    recreate()
}

3.3 高效自定义主题的技巧 #

• 统一颜色管理：所有色值都定义在colors.xml中，主题文件仅引用色值名称，不要硬编码色值，修改时仅需调整colors.xml即可同步两个主题的配置
• 保持属性对齐：深浅两个主题文件的属性键完全一致，仅修改对应的色值，避免出现某一个属性只在单个主题中定义导致的样式错乱
• 复用系统属性：自定义控件的颜色优先引用?attr/colorPrimary这类主题属性，不要直接引用@color/xxx，切换主题时会自动适配，不需要额外修改控件代码
• 对比度校验：所有On系列颜色和对应主色的对比度要至少达到4.5:1，保证不同模式下的内容可读性

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