跳到主要内容
版本：v8

主题

Ionic 提供了多个全局变量，这些变量在组件中广泛使用，用于改变整个应用程序的默认主题。应用颜色 可用于改变大多数 Ionic 组件的外观，而 阶梯颜色 则在部分 Ionic 组件中作为颜色变体使用。

应用颜色​

应用颜色在 Ionic 的多个位置被使用。它们便于轻松创建深色调色板或与品牌相匹配的主题。

需要注意的是，背景和文本颜色变量还需要一个以 rgb 格式 设置的 rgb 变量。请参阅 透明度问题 了解为何还需要 rgb 属性的解释。

名称描述
--ion-background-color整个应用的背景色
--ion-background-color-rgb整个应用的背景色，rgb 格式
--ion-text-color整个应用的文本颜色
--ion-text-color-rgb整个应用的文本颜色，rgb 格式
--ion-backdrop-colorBackdrop 组件的颜色
--ion-backdrop-opacityBackdrop 组件的不透明度
--ion-overlay-background-color覆盖层的背景颜色
--ion-border-color边框颜色
--ion-box-shadow-color盒阴影颜色
--ion-tab-bar-backgroundTab 栏的背景
--ion-tab-bar-background-focused获得焦点时 Tab 栏的背景
--ion-tab-bar-border-colorTab 栏的边框颜色
--ion-tab-bar-colorTab 栏的颜色
--ion-tab-bar-color-selected被选中的 Tab 按钮的颜色
--ion-toolbar-backgroundToolbar 的背景
--ion-toolbar-border-colorToolbar 的边框颜色
--ion-toolbar-colorToolbar 中组件的颜色
--ion-toolbar-segment-colorToolbar 中 Segment 按钮的颜色
--ion-toolbar-segment-color-checkedToolbar 中被选中的 Segment 按钮的颜色
--ion-toolbar-segment-backgroundToolbar 中 Segment 按钮的背景
--ion-toolbar-segment-background-checkedToolbar 中被选中的 Segment 按钮的背景
--ion-toolbar-segment-indicator-colorToolbar 中 Segment 按钮指示器的颜色
--ion-item-backgroundItem 的背景
--ion-item-border-colorItem 的边框颜色
--ion-item-colorItem 中组件的颜色
--ion-placeholder-colorInput 中占位符的颜色

阶梯颜色​

在探索了多种自定义 Ionic 主题的方法后，我们发现不能只使用单一背景色或文本色。为了在设计中体现重要性和层次感，我们需要使用不同深浅的背景色和文本色。为了适应这种模式，我们创建了阶梯颜色。

虽然更新背景 (--ion-background-color) 和文本 (--ion-text-color) 变量会改变大多数组件的外观，但对于某些 Ionic 组件来说，这可能会显得不协调或异常。这在应用深色调色板时会更明显。

在某些组件中，我们使用比背景色略深或比文本色略浅的颜色。例如，项目标题文本可能需要使用 #404040，这比我们的默认文本色浅几个色阶。同时，加载组件的背景色比白色略深，使用 #f2f2f2。我们使用阶梯颜色来定义这些细微的差异。在更新应用程序的背景色或文本颜色时，更新阶梯颜色非常重要。

Ionic 为文本和背景颜色提供了独立的阶梯颜色，以便它们可以单独更新。这对于同时使用文本和背景阶梯颜色的组件非常有用，并使我们能够有效实现 高对比度调色板。

默认情况下，Ionic 的文本阶梯颜色以默认文本颜色值 #000000 开始，并按照递增的百分比与背景颜色值 #ffffff 混合。Ionic 的背景阶梯颜色以默认背景颜色值 #ffffff 开始，并按照递增的百分比与文本颜色值 #000000 混合。完整的阶梯颜色列表如下方生成器所示。

阶梯颜色生成器​

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

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

Contents

编辑此页