我的书签
添加书签
移除书签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 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.
When changing a color, it is important to set all of the related properties. This can be done easily with the
- Primary
- Shade
- Tint
- Secondary
- Shade
- Tint
- Tertiary
- Shade
- Tint
- Success
- Shade
- Tint
- Warning
- Shade
- Tint
- Danger
- Shade
- Tint
- Dark
- Shade
- Tint
- Medium
- Shade
- Tint
- Light
- Shade
- Tint
Platform Standards
Ionic components adapt their look and behavior based on the platform the app is running on. We call this Platform Continuity. This allows developers to build apps that use the same codebase for multiple platforms, while still looking "native" to those particular platforms.
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
CSS Variables
All of the Ionic components are themed using CSS 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
Branding
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
