主题

主题是一组样式或属性，例如颜色、类型和形状，它们可以影响用户的移动或大屏幕设备以及应用内体验的外观和感觉。

要点

  • 为了给用户提供更个性化和更易访问的体验，请确保您的应用采用系统首选项（包括主题，例如浅色或深色、动态和对比度）。
  • 创建自定义主题以用作动态主题不可用时的备用方案。
  • 使用各种主题时，请考虑类型设置。
  • 始终检查文本和表面对比度，以确保易读性。

主题类型

主题是基于系统的或基于应用的。系统主题可以影响用户的整个设备 UI 并在设备设置中提供相应的控件，而应用主题仅影响实施它的应用。

您的应用必须实现这两种主题类型之一才能显示它，但应用主题仅在应用内应用，而不是设备上的其他位置。您还可以使用应用内设置覆盖一些系统主题设置。

系统主题

系统主题应用于整个 Android 设备，包括根据用户设置的各个应用。系统主题包括浅色和深色主题、用户生成的主题和制造商主题。

浅色和深色主题

浅色主题或日间模式由亮显示模式组成，该模式具有更高的亮度和由高色调值构建的表面。相反，深色主题或夜间模式会切换 UI 以降低亮度。表面由深灰色或低色调值构建。

深色主题具有多种优势：有助于在阳光充足或光线昏暗的环境中提高屏幕可读性，由于亮度较低，减少眼睛疲劳，并节省电池电量。此外，它通常是用户最常请求的应用功能。

图 1：相同的家庭屏幕和图标，显示浅色和深色主题。

实施浅色和深色主题时，请考虑以下要点

  • 您可以自定义配色方案以获得更大的表现力。如果您使用 Material Theme Builder 创建配色方案，它会自动创建深色配色方案。阅读有关自定义 Material 和颜色系统的更多信息，以创建品牌主题。
  • 用户可以在系统级显示设置中将浅色主题或深色主题设置为始终开启、始终关闭或根据一天中的时间自动切换。我们建议反映用户首选的系统设置，但最好创建应用内控件，以便为用户提供更细化的修改。
  • WebView 中的 Web 内容也可以使用浅色、深色或默认样式。阅读有关如何在 webview 中支持深色主题。
  • 如果用户已启用，Android 可以强制使用深色主题。您还可以创建自定义深色主题以获得更大的控制权。
  • 如果用户未启用其他主题或设置，您可以选择将应用“锁定”到浅色主题。但是，我们不建议这样做，因为它可能违反用户的辅助功能和个性化需求。
图 2：一个应用显示相同的内容，但使用浅色和深色主题
用户生成的主题

用户生成的主题受 动态颜色 支持，我们在 Android 12 中推出的 Material You 中提供了此功能。启用后，动态颜色会从用户的墙纸中派生自定义颜色，以应用于其应用和系统 UI。此调色板用作生成浅色和深色配色方案的起点。

字体设置也可以在设备设置中更新，以满足用户的偏好和 辅助功能 需求。这些设置可以并且应该应用于应用，因此请确保使用可缩放的像素值作为字体。

图 3：从墙纸派生的 UI 配色方案


图 4：应用 UI 配色方案墙纸
制造商主题

设备制造商可能会提供其他专有主题功能，这些功能可能会影响系统 UI 和显示设置。

应用主题

基线

Material 库中的 Material 组件提供了一个基线主题，该主题使用紫色配色方案和 Roboto 字体。任何未定义主题属性的应用都会恢复到这些基线属性。

自定义（品牌）

使用自定义主题可以为应用的外观和感觉提供更大的表现力，或者在某些系统主题不可用时用作备用方案。无论您是使用完整的自定义设计系统、小型品牌指南还是您最喜欢的几种颜色，这都非常有用。

您的应用还可以有多个自定义方案，无论是用户可以选择完整方案、内容启发或子品牌元素。

图 5：同一个应用及其内容，应用了基线主题（左）和自定义主题（右）


图 6：使用基线生成的主题（左）和由自定义值组成的主题（右）的按钮
内容

为了使某些内容更具焦点，UI 可以使用动态颜色从该内容继承颜色。内容颜色与一个主要内容源配合使用效果很好，但在具有多个内容源的视图中使用时，请务必谨慎。

图 7：应用从关键艺术中提取内容。媒体通知还可以从媒体艺术作品中提取颜色

主题通常会影响整个应用，但也可以选择性地应用以及其他主题一起应用。通过坚持使用层次结构来避免过多的主题和组合：一个主要主题源（无论是动态的还是自定义的），应用于大多数 UI。

图 8：应用可以通过应用动态颜色或品牌颜色到特定元素来组合使用主题。
Material（材质设计）

Material Design 提供了基础主题和主题系统（颜色、字体、形状）。Material Theming 还可以扩展以实现主题的其他属性。

品牌

如果 Material Design 主题系统与您在应用中想要的视觉效果不符，您可以实现完全自定义的主题。请确保测试自定义属性的对比度和可读性。

了解如何在 Compose 中实现自定义系统.

主题属性

主题属性与 UI 设计中常用的常见视觉样式保持一致，以唤起一系列美学效果。在应用中，这些属性通常与 Material 主题系统相关联，以便应用开发者进行自定义。

颜色

使用颜色来表达风格和传达含义。设置应用的颜色对于个性化、定义语义目的以及当然定义品牌标识至关重要。

在一个主题中，配色方案是指分配给特定角色的一组色调，这些角色映射到组件。了解更多关于 Android UI 中的颜色 和 Material 3 颜色系统。

图 9：颜色

字体

Android 的系统字体是 Roboto（所有应用都可以免费使用），但您可以自定义字体。请考虑所选字体的可读性，使其与它们的角色相一致。了解如何应用字体。

图 10：基于标题大小的字体示例

形状

自定义容器角的形状（超出基线默认值）有助于定义应用的特色。例如，您可以使用完全圆角来营造更柔和、更有趣的感觉，或者使用有角度的切割来营造更严肃的感觉。查看 Material 组件 的形状标记和样式。

图 11：容器角形状

图标

Material Icons 可用于您的应用，共有五种样式：填充、轮廓、锐利、圆形、双色调。在整个应用中使用相同的图标样式，以保持一致和精致的外观。

图 12：Material 图标样式

其他主题属性

虽然颜色、字体和形状构成了主要的 Material 主题系统，但设计系统并不局限于 Material 依赖的概念。您可以修改现有系统并引入全新的系统（使用新的类和类型）以使其他概念与主题兼容。您可能还需要扩展或替换现有系统，以利用超出提供的自定义属性。例如，您可能希望添加渐变或间距尺寸系统。

在您的应用中应用主题

主题与样式加类

主题和样式都可以具有多个设计属性。样式可以独立于主题，并且指的是单个元素（或 View）的外观，而您可以跨多个元素甚至整个应用设置主题。样式是可以重复使用的样式选择，类似于设计软件中的样式或标记。例如，正文大号是一种样式，而浅色和深色是主题。

在 Compose 中实现主题

主题通常由多个系统组成，这些系统对常见的视觉和行为概念进行分组，您可以使用带有主题值的类对它们进行建模。

查看 Compose 中的 Material Design 3，以获取有关使用 Jetpack Compose 创建 Material Design 3 主题实现的更多信息。

Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
在 Views 中实现主题

主题是可以在整个应用中使用的语义命名资源的集合。主题共享相同的样式语法。

开始使用 Views.

Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>

Webviews

WebView 中的 Web 内容也可以使用浅色、深色或默认样式。了解如何在 webviews 中支持深色主题。

自定义 Material 主题

您可以 使用 Material Theme Builder Figma 插件 来自定义 Material 主题。使用它构建主题会为您提供可实现的主题文件，其中已生成浅色和深色配色方案，使您可以通过使用您的精确值更新导出的主题文件来进一步进行自定义。

图 13：Material Theme Builder 允许生成动态和自定义主题