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 属性。

¥It is important to note that the background and text color variables also require a rgb variable to be set in rgb format. See The Alpha Problem for an explanation of why the rgb property is also needed.

名称描述
--ion-background-color整个 app 的背景颜色
--ion-background-color-rgb整个 app 的背景颜色，rgb 格式
--ion-text-color整个 app 的文本颜色
--ion-text-color-rgb整个 app 的文本颜色，rgb 格式
--ion-backdrop-color背景组件的颜色
--ion-backdrop-opacity背景组件的不透明度
--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-colorItem 中组件的颜色
--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。我们使用阶梯颜色来定义这些细微的变化。更新应用的背景或文本颜色时更新阶梯颜色非常重要。

¥In some components we use a shade darker than the background or lighter than the text. For example, an item heading text may need to be #404040, which is a few shades lighter than our default text color. Meanwhile, the loading component background is a shade darker than white, using #f2f2f2. We use stepped colors in order to define these slight variations. It is important to update the stepped colors when updating the background or text color of an application.

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 混合。阶梯颜色的完整列表显示在下面的生成器中。

¥By default, the Ionic text stepped colors start at the default text color value #000000 and mix with the background color value #ffffff using an increasing percentage. The Ionic background stepped colors start at the default background color value #ffffff and mix with the text color value #000000 using an increasing percentage. The full list of stepped colors is shown in the generator below.

阶梯式颜色生成器​

¥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;
}

目录