跳至主要内容
版本：v8

主题

Ionic 提供了一些全局变量，这些变量在整个组件中使用，用于更改整个应用程序的默认主题。 应用程序颜色 有助于更改大多数 Ionic 组件的外观，而 分级颜色 则用作某些 Ionic 组件中的变体。

应用程序颜色​

应用程序颜色在 Ionic 的多个地方使用。这些颜色非常适合轻松创建与品牌匹配的深色调色板或主题。

需要注意的是，背景和文本颜色变量还需要在 rgb 格式 中设置 rgb 变量。有关 rgb 属性为何还需要的原因，请参见 Alpha 问题。

名称描述
--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-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-color项目中组件的颜色
--ion-placeholder-color输入框中占位符的颜色

分级颜色​

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

更新背景 (--ion-background-color) 和文本 (--ion-text-color) 变量将更改大多数组件的应用程序外观，但某些 Ionic 组件可能看起来很奇怪或很乱。这在应用深色调色板时会更加明显。

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

Ionic 为文本颜色和背景颜色提供了独立的分级颜色，因此可以单独更新它们。这对于使用文本和背景分级颜色的组件非常有用，并允许我们有效地实现 高对比度调色板。

默认情况下，Ionic 文本分级颜色从默认文本颜色值 #000000 开始，并使用递增的百分比与背景颜色值 #ffffff 混合。Ionic 背景分级颜色从默认背景颜色值 #ffffff 开始，并使用递增的百分比与文本颜色值 #000000 混合。完整的分级颜色列表显示在下面的生成器中。

分级颜色生成器​

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

背景

文本

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

内容

编辑此页面