跳到主要内容
版本：v7

Themes

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 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 按钮的颜色
--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 的阶梯颜色从默认背景色值 #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;
}

Contents

编辑此页