Skip to main content

主题基础知识

Ionic 框架被设计为一个空白板，可以轻松地定制和修改以适应品牌，同时仍然遵循不同平台的标准。现在为 Ionic 应用设置主题比以往任何时候都更容易。由于该框架是用 CSS 构建的，它自带预设的默认样式，非常容易更改和修改。

🌐 Ionic Framework is built to be a blank slate that can easily be customized and modified to fit a brand, while still following the standards of the different platforms. Theming Ionic apps is now easier than ever. Because the framework is built with CSS, it comes with pre-baked default styles which are extremely easy to change and modify.

颜色​

🌐 Colors

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

🌐 Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a shade and tint, used throughout Ionic.

在更改颜色时，重要的是设置所有相关的属性。这可以通过 Color Generator 工具轻松完成，但如果需要，也可以手动编写。有关 Ionic 颜色的更多信息，请参见 Colors。

🌐 When changing a color, it is important to set all of the related properties. This can be done easily with the Color Generator tool, but these can also be manually written if desired. For more information on Ionic colors, see Colors.

    平台标准​

    🌐 Platform Standards

    Ionic 组件会根据应用运行的平台调整其外观和行为。我们称之为 自适应样式。这使开发者能够构建使用相同代码库用于多个平台的应用，同时仍然对这些特定平台看起来“原生”。

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

    🌐 Ionic has two modes that are used to customize the look of components based on the platform: ios and md. Each platform has a default mode, but this can easily be configured. For more information on customizing an application based on the platform, see Platform Styles.

    CSS 变量​

    🌐 CSS Variables

    Ionic Framework 组件使用 CSS 自定义属性（变量）进行主题化。CSS 变量为原本静态的语言添加了动态值。这通常需要像 Sass 这样的 CSS 预处理器。通过更改 Ionic Framework 提供的任何 CSS 变量 的值，可以轻松更改应用的外观。

    CSS 阴影部分​

    🌐 CSS Shadow Parts

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

    品牌​

    🌐 Branding

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

    🌐 Ionic provides application colors that can be used to theme an application to match a brand or color scheme. The default theme uses a light background, but everything from the background color to the text color is fully customizable. For more information on branding, see Themes.

    目录