跳到主要内容
版本:v8

主题基础

Ionic Framework 被设计为一块白板,可以轻松定制和修改以匹配品牌风格,同时仍然遵循不同平台的标准。现在为 Ionic 应用设置主题比以往任何时候都更容易。因为框架是用 CSS 构建的,它附带了预置的默认样式,可以极其轻松地更改和修改。

颜色​

Ionic 有九种默认颜色,可用于更改许多组件的颜色。每种颜色实际上是一个包含多个属性的集合,包括在 Ionic 中使用的 shade 和 tint。

更改颜色时,设置所有相关属性非常重要。这可以通过颜色生成器工具轻松完成,但也可以根据需要手动编写。有关 Ionic 颜色的更多信息,请参阅颜色。

    平台标准​

    Ionic 组件会根据应用运行所在的平台调整其外观和行为。我们称之为自适应样式。这使得开发者能够构建在多个平台上使用相同代码库的应用,同时在这些特定平台上仍呈现"原生"的外观。

    Ionic 有两种模式用于根据平台自定义组件的外观:ios 和 md。每个平台都有一个默认模式,但这可以轻松配置。有关基于平台定制应用的更多信息,请参阅平台样式。

    CSS 变量​

    Ionic Framework 组件使用 CSS 自定义属性(变量)进行主题化。CSS 变量为原本静态的语言增加了动态值。这传统上需要像 Sass 这样的 CSS 预处理器才能实现。通过更改 Ionic Framework 提供的任何CSS 变量的值,可以轻松改变应用的外观。

    CSS Shadow Parts​

    CSS 阴影部分 的加入使得完全自定义 Ionic Framework Shadow 组件变得更加容易。过去,使用 Shadow DOM 的组件无法直接为其 shadow 树内部的元素设置样式。随着 Shadow parts 的加入,不再需要为 Shadow 组件内部元素的每个属性都设置 CSS 变量。有关使用 parts 自定义 Ionic Framework 组件的更多信息,请参阅 CSS 阴影部分 指南。

    品牌化​

    Ionic 提供了应用颜色,可用于为应用设置主题以匹配品牌或配色方案。默认主题使用浅色背景,但从背景颜色到文本颜色的所有内容都可以完全自定义。有关品牌化的更多信息,请参阅主题。