跳到主要内容
版本：v8

高级主题

基于 CSS 的主题功能使应用能够通过加载 CSS 文件或更改少量 CSS 属性值来快速自定义颜色。

theme-color 元标签​

theme-color 元标签的值表示浏览器可用于自定义页面或周围界面显示的颜色。此类元标签还可以接受媒体查询，允许开发者为浅色和深色模式分别设置主题色。

theme-color 元标签的 content 值必须包含有效的 CSS 颜色值，且不能包含 CSS 变量。

备注

theme-color 元标签控制在 Web 浏览器或作为 PWA 运行时的界面主题，在通过 Capacitor 或 Cordova 部署应用时不起作用。如果您希望自定义状态栏下方的区域，我们建议使用 Capacitor 状态栏插件。

以下示例演示了如何使用 theme-color 来样式化 iOS 15 上的浏览器界面。

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#0054e9" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#eb445a" />
浅色模式深色模式
浏览器界面中的浅色模式主题颜色。浏览器界面中的深色模式主题颜色。

theme-color 元标签还可用于自定义 macOS Monterey 或更新版本上 Safari 的工具栏。

iOS 15 和 macOS 上的 Safari 会自动确定要使用的合适主题颜色，但如果您需要更多控制权，添加此元标签会很有用。

有一小部分颜色浏览器不会使用，因为它们会干扰浏览器界面。例如，在 macOS 的 Safari 中设置 content="red" 将不起作用，因为该颜色会干扰工具栏中的红色关闭按钮。如果您遇到这种情况，请尝试稍微调整您的颜色选择。

备注

如果同时存在 theme-color 元标签和 manifest.json 中的 theme，浏览器会优先使用 theme-color 元标签。

有关更多信息，请参阅 MDN theme-color 文档。

全局变量​

虽然在主题章节中的应用变量和阶梯变量有助于更改应用的颜色，但通常还需要在多个组件中使用的变量。以下变量在组件之间共享，用于更改全局内边距设置等。

应用变量​

名称描述
--ion-font-family应用的字体家族
--ion-statusbar-padding应用的状态栏顶部内边距
--ion-safe-area-top调整应用的安全区域顶部内边距
--ion-safe-area-right调整应用的安全区域右侧内边距
--ion-safe-area-bottom调整应用的安全区域底部内边距
--ion-safe-area-left调整应用的安全区域左侧内边距
--ion-margin调整边距属性的边距
--ion-padding调整内边距属性的内边距
--ion-placeholder-opacity调整输入框、文本域、搜索栏和选择组件中占位符的不透明度

网格变量​

名称描述
--ion-grid-columns网格中的列数
--ion-grid-padding-xsxs 断点下网格的内边距
--ion-grid-padding-smsm 断点下网格的内边距
--ion-grid-padding-mdmd 断点下网格的内边距
--ion-grid-padding-lglg 断点下网格的内边距
--ion-grid-padding-xlxl 断点下网格的内边距
--ion-grid-column-padding-xsxs 断点下网格列的内边距
--ion-grid-column-padding-smsm 断点下网格列的内边距
--ion-grid-column-padding-mdmd 断点下网格列的内边距
--ion-grid-column-padding-lglg 断点下网格列的内边距
--ion-grid-column-padding-xlxl 断点下网格列的内边距

变量已知限制​

Alpha 问题​

目前尚未有完整的 浏览器支持 来对十六进制颜色使用 Alpha 通道。rgba() 函数仅接受 R, G, B, A（红、绿、蓝、透明度）格式的值。以下代码展示了传递给 rgba() 的正确和错误值示例。

/* 这些示例使用相同的颜色：blueviolet。 */
.broken {
  --violet: #8a2be2;

  /* rgba(#8a2be2, .5) */
  color: rgba(var(--violet), 0.5); /* 错误！不支持十六进制。 */
}

.working {
  --violet-rgb: 138, 43, 226;

  /* rgba(138, 43, 226, .5) */
  color: rgba(var(--violet-rgb), 0.5); /* 有效！ */
}
备注

有关如何获取和设置 CSS 变量的更多信息，请参阅 CSS 变量 部分。

Ionic 在多个组件中使用带透明度（Alpha）的颜色。为了使此功能正常工作，这些属性必须以 RGB 格式提供。当更改任何以 -rgb 结尾的属性时，重要的是它们也以逗号分隔的格式提供，不带括号。以下是一些更改文本和背景颜色的示例。

:root {
  /* 这些示例使用相同的颜色：sienna。 */
  --ion-text-color: #a0522d;
  --ion-text-color-rgb: 160, 82, 45;

  /* 这些示例使用相同的颜色：lightsteelblue。 */
  --ion-background-color: #b0c4de;
  --ion-background-color-rgb: 176, 196, 222;
}

请注意，RGB 格式的颜色与十六进制属性是完全相同的颜色，但现在可以与 rgba() 一起使用。例如，--ion-text-color-rgb 现在可以按以下方式使用：

body {
  color: rgba(var(--ion-text-color-rgb), 0.25);
}

媒体查询中的变量​

当前不支持在 媒体查询 中使用 CSS 变量，但已有开放草案来添加 自定义媒体查询 和 自定义环境变量，这将解决此问题！然而，在目前的支持状态下，以下代码将 无法 工作：

:root {
  --breakpoint: 600px;
}

@media (min-width: var(--breakpoint)) {
  /* 无法工作 :( */
}

修改 CSS 颜色变量​

虽然使用 Sass 的内置函数可以轻松修改颜色，但目前修改 CSS 变量中设置的颜色并不那么容易。这可以通过在 CSS 中拆分 RGB 或 HSL 通道并修改每个值来实现，但这很复杂且存在功能缺失。

这到底意味着什么？基本上，使用 CSS 预处理器（如 Sass）允许我们使用函数来操作单个颜色。例如，我们可以在 Sass 中创建以下颜色：

// 背景颜色、加深色和浅色
$background: #0054e9;
$background-shade: mix(#000, $background, 12%);
$background-tint: mix(#fff, $background, 10%);

// 文本颜色、更深色和更浅色
$text: #444;
$text-darker: darken($text, 15);
$text-lighter: lighten($text, 15);

经过 Sass 编译器处理后，颜色将具有以下值：

变量值
$background#0054e9
$background-shade#004acd
$background-tint#1a65eb
$text#444444
$text-darker#1e1e1e
$text-lighter#6a6a6a

然而，由于 CSS 变量可以在运行时设置并且更具动态性，目前无法使用简单函数来操作它们。

这通常不是问题，但当应用程序需要动态主题时就会带来困扰。在 Ionic 中，这就是为什么每种颜色都有 变体，以及为什么主题需要 阶梯颜色 的原因。

已有草案和议题正在讨论 颜色修改提案，这将使此功能成为可能。

安全区域内边距​

显示器的安全区域是指未被设备刘海、状态栏或设备 UI 部分而非应用 UI 部分的其他元素覆盖的区域。安全区域的尺寸因设备和方向（纵向或横向）而异。

例如，以下是 iPhone 14 Pro Max 的截图。红色区域是安全区域，白色区域是应用内容会被覆盖的区域。

纵向横向

为了适应这一点，Ionic 会自动为某些组件添加内边距。例如，放置在 ion-modal 中的第一个 ion-toolbar 组件将根据设备安全区域的顶部边缘获得内边距。这避免了设备的刘海覆盖标题文本。

可以通过 CSS 使用 应用变量 中描述的 --ion-safe-area-(dir) 变量手动调整此内边距。可以针对整个应用程序或基于每个组件设置值。例如：

html {
  --ion-safe-area-left: 25px;
}

ion-modal {
  --ion-safe-area-top: 0;
}

Contents

编辑此页