Skip to main content

主题基础知识

Ionic Framework 被构建为一块空白板，可以轻松定制和修改以适应品牌，同时仍然遵循不同平台的标准。现在，主题化 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.

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

¥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 组件根据应用运行的平台调整其外观和行为。我们称之为自适应样式。这使得开发者可以为多个平台构建使用相同代码库的应用，同时仍然关注那些特定平台的 "native"。

    ¥Ionic components adapt their look and behavior based on the platform the app is running on. We call this Adaptive Styling. This allows developers to build apps that use the same codebase for multiple platforms, while still looking "native" to those particular platforms.

    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 预处理器。通过更改 CSS 变量 Ionic Framework 提供的任何值，可以轻松更改应用的外观。

    ¥The Ionic Framework components are themed using CSS custom properties (variables). CSS variables add dynamic values to an otherwise static language. This is something that has traditionally required a CSS preprocessor like Sass. The look of an application can easily be changed by changing the value of any of the CSS Variables Ionic Framework provides.

    CSS 阴影部分​

    ¥CSS Shadow Parts

    添加了 CSS Shadow Parts，以便更轻松地完全自定义 Ionic Framework Shadow 组件。过去，使用 影子 DOM 的组件无法直接为其影子树内部的元素设置样式。添加 Shadow 部件后，Shadow 组件的内部元素上的每个属性不再需要 CSS 变量。有关使用部件自定义 Ionic Framework 组件的更多信息，请参阅 CSS 阴影部分 指南。

    ¥CSS Shadow Parts were added to make it easier to fully customize Ionic Framework Shadow components. In the past, components that use Shadow DOM were unable to have elements inside of their shadow tree styled directly. With the addition of Shadow parts, there is no longer a need for CSS variables for every property on an inner element of a Shadow component. For more information on customizing Ionic Framework components using parts, see the CSS Shadow Parts guide.

    品牌​

    ¥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.

    目录