主题

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

要点

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

主题类型

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

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

系统主题

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

浅色和深色主题

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

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

图 1：相同的 home screen 和图标，显示了浅色和深色主题。

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

  • 您可以自定义配色方案以获得更大的表达力。如果您使用 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 中实现主题

主题通常包含多个系统，这些系统对常见的视觉和行为概念进行分组，您可以使用具有主题值的类对其进行建模。

有关使用 Jetpack Compose 创建 Material Design 3 主题实现的更多信息，请参阅 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>

Webview

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

自定义 Material 主题

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

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