跳到主要内容
版本：v6

主题

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-color输入框中占位符文本的颜色

阶梯颜色​

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

虽然更新背景（--ion-background-color）和文本（--ion-text-color）变量会改变大多数组件的外观，但某些 Ionic 组件可能会看起来不协调或出现异常。这在应用较深色主题时会更明显。

在某些组件中，我们使用比背景更暗或比文本更浅的色调。例如，项目标题文本可能需要为 #404040，这比我们的默认文本颜色浅几个色调。同时，loading 组件的背景比白色暗一个色调，使用 #f2f2f2。我们使用阶梯颜色来定义这些细微的变化。在更新应用的背景或文本颜色时，更新阶梯颜色也很重要。

默认情况下，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-color-step-50: #f2f2f2;
	--ion-color-step-100: #e6e6e6;
	--ion-color-step-150: #d9d9d9;
	--ion-color-step-200: #cccccc;
	--ion-color-step-250: #bfbfbf;
	--ion-color-step-300: #b3b3b3;
	--ion-color-step-350: #a6a6a6;
	--ion-color-step-400: #999999;
	--ion-color-step-450: #8c8c8c;
	--ion-color-step-500: #808080;
	--ion-color-step-550: #737373;
	--ion-color-step-600: #666666;
	--ion-color-step-650: #595959;
	--ion-color-step-700: #4d4d4d;
	--ion-color-step-750: #404040;
	--ion-color-step-800: #333333;
	--ion-color-step-850: #262626;
	--ion-color-step-900: #191919;
	--ion-color-step-950: #0d0d0d;
}

目录

编辑此页