跳到主要内容
版本：v8

主题

Ionic 提供了几个全局变量，用于在组件中更改整个应用的默认主题。应用颜色可用于更改大多数 Ionic 组件的外观，而阶梯颜色则用作某些 Ionic 组件中的变体。

应用颜色​

应用颜色在 Ionic 的多个地方使用。它们对于轻松创建深色调色板或匹配品牌的主题非常有用。

需要注意的是，背景和文本颜色变量还需要设置一个 rgb 格式的 rgb 变量。请参阅Alpha 问题了解为什么还需要 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 Bar 的背景
--ion-tab-bar-background-focused聚焦时 Tab Bar 的背景
--ion-tab-bar-border-colorTab Bar 的边框颜色
--ion-tab-bar-colorTab Bar 的颜色
--ion-tab-bar-color-selected选中 Tab Button 的颜色
--ion-toolbar-backgroundToolbar 的背景
--ion-toolbar-border-colorToolbar 的边框颜色
--ion-toolbar-colorToolbar 中组件的颜色
--ion-toolbar-segment-colorToolbar 中 Segment Buttons 的颜色
--ion-toolbar-segment-color-checkedToolbar 中已选中 Segment Buttons 的颜色
--ion-toolbar-segment-backgroundToolbar 中 Segment Buttons 的背景
--ion-toolbar-segment-background-checkedToolbar 中 Segment Buttons 的背景
--ion-toolbar-segment-indicator-colorToolbar 中 Segment Button 指示器的颜色
--ion-item-backgroundItem 的背景
--ion-item-border-colorItem 的边框颜色
--ion-item-colorItem 中组件的颜色
--ion-placeholder-colorInputs 中占位符的颜色

阶梯颜色​

在探索自定义 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;
}

目录

编辑此页