Dark Mode — 什么是深色模式，移动应用界面中的深色主题

什么是 Dark Mode，为什么需要它？

Dark Mode — 是一种界面色彩方案，其中屏幕背景为深色（通常 Android 中为 #121212，iOS 中为 #1C1C1E），而文本和界面元素为浅色。与简单的颜色反转不同，高质量的 Dark Mode 使用精心挑选的调色板：深灰色背景而非纯黑色（减少光晕效果），低饱和度的强调色和柔和阴影。Dark Mode 的系统支持出现在 iOS 13（2019 年 9 月）和 Android 10（2019 年 9 月）。

引入的主要原因 — 用户舒适度。在弱光环境下（晚上、黑暗中），明亮的白色屏幕会导致眼睛疲劳并可能引发头痛。Dark Mode 在保持可读性的同时降低了屏幕亮度。对于畏光或光敏感的用户来说，深色主题不是一种选择，而是舒适使用应用的唯一可能。根据 Android Developers 的数据，超过 30% 的 Android 用户会永久开启深色主题。

Dark Mode 可节省电池 在 OLED 屏幕上。与 LCD 不同，LCD 的背光始终亮着，而 OLED 像素是自发光的。深色意味着像素关闭 — 能耗降低。根据 Google（Android Developers Blog，2019）的数据，在配备 OLED 屏幕的 Pixel 上，100% 亮度下的 Dark Mode 比浅色主题节能 60%。在 LCD 屏幕上，节能效果微乎其微（约 3–5%），因为矩阵背光独立于像素颜色工作。

Dark Mode 在移动操作系统中的历史

系统支持 Dark Mode 经历了几个阶段。iOS 13（2019）通过 UIUserInterfaceStyle 引入了全局深色主题。Android 10（2019）为没有自己深色主题的应用添加了 Force Dark Mode。Android 12（2021）与 Material You 开始从壁纸自动生成深色调色板。iOS 15（2021）扩展了 Safari 和网页内容的 API。根据 StatCounter（2026）的数据，App Store 和 Google Play 中前 100 名应用的 82% 支持 Dark Mode。

iOS 中的 Dark Mode：Swift API 和 UIKit 支持

iOS Dark Mode API 基于 UITraitEnvironment 协议。每个 UIViewController 和 UIView 都有 traitCollection.userInterfaceStyle 属性，可以是 .unspecified、.light 或 .dark。当系统主题更改时，iOS 会调用 traitCollectionDidChange(_:) 方法。开发者应在此方法中更新颜色，或使用动态颜色（UIColor(dynamicProvider:)），这些颜色会在浅色和深色调色板之间自动切换。

class ViewController: UIViewController {

    @IBOutlet var titleLabel: UILabel!

    override func traitCollectionDidChange(_: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
            updateColors()
        }
    }

    func updateColors() {
        let isDark = traitCollection.userInterfaceStyle == .dark
        view.backgroundColor = isDark ? UIColor(named: "darkBackground") : .systemBackground
        titleLabel.textColor = isDark ? .white : .darkText
    }
}

// 强制启用 Dark Mode
window.overrideUserInterfaceStyle = .dark

动态颜色 — 在 iOS 中实现 Dark Mode 的最佳方式。UIColor(named:) 会自动从 Asset Catalog 加载 .light 和 .dark 外观的不同值。只需在 Assets.xcassets 中设置具有两个变体（Any Appearance + Dark Appearance）的颜色，UIKit 就会自动选择正确的颜色。动态系统颜色（UIColor.systemBackground、.label、.secondaryLabel）已经支持 Dark Mode 并会自动更改。

SwiftUI 和 Dark Mode

SwiftUI 开箱即用支持 Dark Mode。所有标准颜色和修饰符（Color.primary、.background、Color(UIColor.systemBackground)）都会自动适应。对于自定义颜色，使用带有动态 UIColor 的 Color(uiColor:) 或使用环境变量 @Environment(\.colorScheme) 进行显式主题检查。SwiftUI 视图在主题更改时会自动重绘，无需调用 traitCollectionDidChange。

struct ThemeView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("Dark Mode")
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .background(colorScheme == .dark ? Color(.systemGray6) : .white)
    }
}

Android 中的 Dark Mode：Kotlin API 和 AppCompat

Android Dark Mode 通过 AppCompat 库和 Theme.AppCompat.DayNight 主题实现。白天使用浅色主题，夜间使用深色主题。强制启用通过 AppCompatDelegate.setDefaultNightMode() 设置：MODE_NIGHT_YES（深色）、MODE_NIGHT_NO（浅色）、MODE_NIGHT_FOLLOW_SYSTEM（系统）。资源分为浅色（res/values/styles.xml）和深色（res/values-night/styles.xml）。

// 强制启用深色主题
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // 在 super.onCreate 之前设置
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // 确定当前主题
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// 在 AndroidManifest.xml 中注册夜间模式
// android:configChanges="uiMode"

Force Dark Mode — Android 10+ 的系统功能，可自动反转不支持深色主题的应用的颜色。通过开发者选项或主题中的 android:forceDarkAllowed="true" 属性启用。这是一个临时解决方案：生产环境需要通过 values-night 实现自己的深色调色板，否则视觉质量会很差（图标反转、颜色难以辨认）。

Material You Dynamic Themes

Material You（Android 12+）从设备壁纸自动生成 5 种关键颜色：primary、secondary、tertiary、neutral、neutralVariant。每种颜色都会创建浅色和深色调色板。开发者使用以下属性：?attr/colorPrimary、?attr/colorOnPrimary、?attr/colorSurface。系统会自动为当前主题选择合适的变体。Dynamic Color 在 Android 12+ 上通过 Material Design 3（组件 com.google.android.material:material）得到支持。

// values/themes.xml — 浅色主题
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_light</item>
    <item name="colorOnPrimary">@color/on_primary_light</item>
</style>

// values-night/themes.xml — 深色主题
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

深色主题设计：对比度和颜色规则

Dark Mode 设计 — 不仅仅是颜色反转。Google Material Design 建议使用深灰色（#121212）而非纯黑色。纯黑色（#000000）与白色文本的对比度过高，会导致光晕效果（字母周围的光晕）。元素的层级（elevation）通过颜色确定：元素越高，背景越亮。背景上的卡片 — #1E1E1E，对话框 — #2D2D2D，导航面板 — #383838。

颜色对比度 在 Dark Mode 中应低于 Light Mode。Material Design 建议：primary 文本 — 白色（#FFFFFF）不透明度 87%，secondary — 60%，disabled — 38%。强调色应降低饱和度：如果在浅色主题中 primary = #6200EE，则在深色主题中 — #BB86FC（浅紫色，柔和）。根据 WCAG 2.1，普通文本的最小对比度 4.5:1 必须在两种主题中都得到满足。

图片和图标 在深色主题中需要单独处理。具有透明度的图标应重新着色为浅色。背景明亮的照片可能刺眼 — 建议将亮度降低 20–30% 或添加半透明叠加层。对于徽标和品牌元素，请使用专为深色背景设计的版本。iOS Asset Catalog 和 Android VectorDrawable 支持浅色和深色主题的单独资源。

Dark Mode 与 Light Mode 对比：优缺点

主题选择 取决于使用条件、内容类型和用户偏好。Nielsen Norman Group（2020 年）的研究表明：在正常光照下，Light Mode 的阅读速度高出 15–20%。然而，在弱光条件下，Dark Mode 可减轻眼睛疲劳并提高可读性。对于文本量大的界面（文章、文档），通常首选 Light Mode。

能耗 — 在 OLED 上使用 Dark Mode 的关键论据。根据 Google（2019 年）的数据，YouTube 在深色主题下的 OLED 屏幕能耗比浅色主题低 43%。Google Maps — 低 32%。界面越亮、屏幕亮度水平越高，节能效果越显著。在 LCD 屏幕上，节能效果不超过 5%。对于经常在户外强光下使用应用的用户，Light Mode 仍然是唯一可读的选择。

IT Sectr 建议 — 我们实现两种主题，支持切换：系统（follow system）、深色、浅色。自动切换不应是唯一选项 — 用户可能白天（偏头痛时）想要深色主题或晚上（阅读时）想要浅色主题。在我们的项目中，我们在个人资料设置中添加主题切换器并记住选择。对于高级内容应用（照片、视频），建议在应用前预览主题。