Skip to main content

主题

Ionic 提供了几个全局变量，这些变量在各个组件中使用，用于改变整个应用的默认主题。应用颜色 对改变大多数 Ionic 组件的外观非常有用，渐变颜色 则在一些 Ionic 组件中作为变化使用。

🌐 Ionic provides several global variables that are used throughout components to change the default theme of an entire application. Application Colors are useful to change the look of most of the Ionic components, and Stepped Colors are used as variations in some of the Ionic components.

应用颜色​

🌐 Application Colors

应用颜色在 Ionic 的多个地方使用。这些颜色对于轻松创建符合品牌的深色调或主题非常有用。

🌐 The application colors are used in multiple places in Ionic. These are useful for easily creating dark palettes or themes that match a brand.

需要注意的是，背景和文本颜色变量也需要在 rgb格式中设置rgb变量。有关为什么还需要rgb属性的解释，请参见透明度问题。

| 名称 | 描述 |

| --- | --- |

| --ion-background-color | 整个应用的背景颜色 |

| --ion-background-color-rgb | 整个应用的背景颜色，rgb格式 |

| --ion-text-color | 整个应用的文本颜色 |

| --ion-text-color-rgb | 整个应用的文本颜色，rgb格式 |

| --ion-backdrop-color | Backdrop 组件的颜色 |

| --ion-backdrop-opacity | Backdrop 组件的不透明度 |

| --ion-overlay-background-color | 覆盖层的背景颜色 |

| --ion-border-color | 边框颜色 |

| --ion-box-shadow-color | 盒子阴影颜色 |

| --ion-tab-bar-background | 标签栏的背景 |

| --ion-tab-bar-background-focused | 焦点标签栏的背景 |

| --ion-tab-bar-border-color | 标签栏边框颜色 |

| --ion-tab-bar-color | 标签栏的颜色 |

| --ion-tab-bar-color-selected | 选定标签按钮的颜色 |

| --ion-toolbar-background | 工具栏的背景 |

| --ion-toolbar-border-color | 工具栏边框颜色 |

| --ion-toolbar-color | 工具栏中组件的颜色 |

| --ion-toolbar-segment-color | 工具栏中分段按钮的颜色 |

| --ion-toolbar-segment-color-checked | 工具栏中已选段按钮的颜色 |

| --ion-toolbar-segment-background | 工具栏中分段按钮的背景 |

| --ion-toolbar-segment-background-checked | 工具栏中分段按钮的背景 |

| --ion-toolbar-segment-indicator-color | 工具栏中分段按钮指示器的颜色 |

| --ion-item-background | 项目背景 |

| --ion-item-border-color | 项目的边框颜色 |

| --ion-item-color | 物品中组件的颜色 |

| --ion-placeholder-color | 输入框中占位符的颜色 |

阶梯颜色​

🌐 Stepped Colors

在探索了定制 Ionic 主题的不同方法之后，我们发现无法只使用一种背景色或文字颜色。为了在整个设计中体现重要性和层次感，我们需要使用不同深浅的背景色和文字颜色。为适应这种模式，我们创建了分级颜色。

🌐 After exploring different ways to customize the Ionic theme, we found that we couldn't use just one background or text color. In order to imply importance and depth throughout the design, we need to use different shades of the background and text colors. To accommodate this pattern, we created stepped colors.

虽然更新背景（--ion-background-color）和文本（--ion-text-color）变量会改变大多数组件的应用外观，但在某些Ionic组件中可能看起来不协调或损坏。在应用较深的配色方案时，这种情况会更加明显。

🌐 While updating the background (--ion-background-color) and text (--ion-text-color) variables will change the look of the app for most components, there are certain Ionic components where it may look off, or broken. This will be more apparent when applying a darker palette.

在某些组件中，我们会使用比背景色深一些或比文字颜色浅一些的色调。例如，条目标题文字可能需要使用 #404040，这比我们的默认文字颜色要浅几个色调。与此同时，加载组件的背景比白色稍深，使用 #f2f2f2。我们使用分级颜色来定义这些细微的色差。在更新应用的背景色或文字颜色时，更新分级颜色非常重要。

Ionic 为文本颜色和背景颜色提供了独立的步进颜色，因此它们可以单独更新。这对于同时使用文本和背景步进颜色的组件非常有用，并且允许我们有效地实现高对比度调色板。

🌐 Ionic provides separate step colors for text and background colors so they can be updated separately. This is useful for components that use both text and background stepped colors and allows us to effectively implement the high contrast palette.

默认情况下，Ionic 文本渐变颜色从默认文本颜色值 #000000 开始，并与背景颜色值 #ffffff 按照递增百分比混合。Ionic 背景渐变颜色从默认背景颜色值 #ffffff 开始，并与文本颜色值 #000000 按照递增百分比混合。完整的渐变颜色列表显示在下面的生成器中。

阶梯式颜色生成器​

🌐 Stepped Color Generator

为你的应用创建自定义背景和文本颜色主题。在下面更新背景或文本颜色的十六进制值，然后将生成的代码直接复制并粘贴到你的 Ionic 项目中。

🌐 Create a custom background and text color theme for your app. Update the background or text color’s hex values below, then copy and paste the generated code directly into your Ionic project.

Background

Text

:root {
	--ion-background-color: #ffffff;
	--ion-background-color-rgb: 255,255,255;

	--ion-text-color: #000000;
	--ion-text-color-rgb: 0,0,0;

	--ion-text-color-step-50: #0d0d0d;
	--ion-text-color-step-100: #1a1a1a;
	--ion-text-color-step-150: #262626;
	--ion-text-color-step-200: #333333;
	--ion-text-color-step-250: #404040;
	--ion-text-color-step-300: #4d4d4d;
	--ion-text-color-step-350: #595959;
	--ion-text-color-step-400: #666666;
	--ion-text-color-step-450: #737373;
	--ion-text-color-step-500: #808080;
	--ion-text-color-step-550: #8c8c8c;
	--ion-text-color-step-600: #999999;
	--ion-text-color-step-650: #a6a6a6;
	--ion-text-color-step-700: #b3b3b3;
	--ion-text-color-step-750: #bfbfbf;
	--ion-text-color-step-800: #cccccc;
	--ion-text-color-step-850: #d9d9d9;
	--ion-text-color-step-900: #e6e6e6;
	--ion-text-color-step-950: #f2f2f2;

	--ion-background-color-step-50: #f2f2f2;
	--ion-background-color-step-100: #e6e6e6;
	--ion-background-color-step-150: #d9d9d9;
	--ion-background-color-step-200: #cccccc;
	--ion-background-color-step-250: #bfbfbf;
	--ion-background-color-step-300: #b3b3b3;
	--ion-background-color-step-350: #a6a6a6;
	--ion-background-color-step-400: #999999;
	--ion-background-color-step-450: #8c8c8c;
	--ion-background-color-step-500: #808080;
	--ion-background-color-step-550: #737373;
	--ion-background-color-step-600: #666666;
	--ion-background-color-step-650: #595959;
	--ion-background-color-step-700: #4d4d4d;
	--ion-background-color-step-750: #404040;
	--ion-background-color-step-800: #333333;
	--ion-background-color-step-850: #262626;
	--ion-background-color-step-900: #191919;
	--ion-background-color-step-950: #0d0d0d;
}

目录