搜索文档 /

主题

betway东盟体育appIonic提供了几个全局变量,这些变量可以在整个组件中使用,以改变整个应用程序的默认主题。 应用程序的颜色 是有用的改变大部分离子组件的外观,和betway东盟体育app 了颜色 是用作一些离子组分的变体。betway东盟体育app

应用程序的颜色

在Ionic中,应用程序的颜色被用于多个地方。betway东盟体育app这对于创建黑色主题或与品牌匹配的主题很有用。

需要注意的是,背景和文本颜色变量也需要设置rgb变量 rgb格式 .看到 α的问题 来解释为什么 rgb 属性也是需要的。

的名字 描述
——ion-background-color 整个应用程序的背景颜色
——ion-background-color-rgb 整个应用程序的背景颜色,rgb格式
——ion-text-color 整个应用程序的文本颜色
——ion-text-color-rgb 整个应用程序的文本颜色,rgb格式
——ion-backdrop-color 背景组件的颜色
——ion-backdrop-opacity 背景组件的不透明度
——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 输入中占位符的颜色

了颜色

在探索了不同的方法来定制离子主题后,我们发现我们不能只使用一种背景或文本颜色。betway东盟体育app为了暗示整个设计的重要性和深度,我们需要使用不同色调的背景和文本颜色。为了适应这种模式,我们创建了阶梯式颜色。

同时更新背景( ——ion-background-color )及文本( ——ion-text-color 变量将改变应用程序的外观为大多数组件,有某些离子组件,它可能看起来off,或损坏。betway东盟体育app当应用较暗的主题时,这一点会更加明显。

在一些组件中,我们使用比背景更暗的阴影或比文本更亮的阴影。例如,条目标题文本可能需要 # 404040 ,它比我们默认的文本颜色浅一些。同时,加载组件的背景是一个比白色暗的阴影,使用 # f2f2f2 .我们使用阶梯式颜色来定义这些细微的变化。当更新应用程序的背景或文本颜色时,更新阶梯形颜色是很重要的。

默认情况下,离子阶梯式颜色从默认betway东盟体育app背景颜色值开始 # ffffff 并与文本颜色值混合 # 000000 使用递增的百分比。下面的生成器显示了阶梯式颜色的完整列表。

加强颜色发电机

为你的应用程序创建一个自定义的背景和文本颜色主题。更新下面的背景或文本颜色的十六进制值,然后复制并粘贴生成的代码直接到您的离子项目。betway东盟体育app

以前的
颜色
下一个
黑暗的模式
Baidu