搜索文件 /

主题

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

应用颜色

应用颜色用于离子的多个位置。betway东盟体育app这些可用于轻松创建与品牌匹配的黑暗主题或主题有用。

值得注意的是,背景和文本颜色变量还需要将RGB变量设置为 RGB格式 。看 alpha问题 解释为什么 RGB. 也需要财产。

姓名 描述
- ulion-background-color 整个应用程序的背景颜色
-ion-background-color-rgb 背景颜色整个app,RGB格式
-ion-text-color 整个应用程序的文本颜色
-ion-text-color-rgb 整个应用程序的文本颜色,RGB格式
- 期 - 背景颜色 背景组件的颜色
- 太阳能 - 不透明度 背景组件的不透明度
- 覆盖 - 背景颜色 覆盖的背景颜色
- - 边界颜色 边框颜色
- 盒子阴影颜色 框阴影颜色
- ion tab - 标签 - 背景 标签栏的背景
- ion tab - 栏 - 背景 - 背景专注 聚焦标签栏的背景
- ion tab - 栏 - 边框颜色 标签栏的边框颜色
- tab bar - 栏杆颜色 标签栏的颜色
-ion-tab-bar-color-color-select 所选选项卡按钮的颜色
-ion-toolbar-背景 工具栏的背景
-ion-toolbar边界颜色 工具栏的边框颜色
-ion-toolbar-颜色 工具栏中的组件的颜色
-ion-toolbar-段颜色 工具栏中的段按钮的颜色
-ion-toolbar-段拍摄 - 颜色检查 工具栏中已选中的段按钮的颜色
-ion-toolbar段 - 背景 段按钮的背景工具栏中的
-ion-toolbar-段 - 背景检查 段按钮的背景工具栏中的
--ion-Toolbar-段 - 指示器颜色 工具栏中段按钮指示灯的颜色
- Item-Background 物品的背景
- intion-intern-border-color 物品的边框颜色
--ion-项目颜色 项目中的组件的颜色
- 占位符颜色 投入中占位符的颜色

踩着颜色

在探索定制离子主题的不同方式之后,我们发现我们无法使用一个背景或文本颜色。betway东盟体育app为了暗示整个设计中的重要性和深度,我们需要使用不同的背景和文本颜色的阴影。要满足此模式,我们创建了梯额颜色。

在更新后台( - ulion-background-color )和文本( -ion-text-color )变量将改变应用程序的外观,对于大多数组件,有一定的离子组件可以关注或破坏。betway东盟体育app应用更暗的主题时,这将更加明显。

在某些组件中,我们使用的阴影比背景更暗或比文本更轻。例如,项目标题文本可能需要是 #404040 ,这比我们的默认文本颜色轻微的阴暗。同时,装载组件背景是比白色更暗的阴影, #f2f2f2 。我们使用梯级颜色来定义这些轻微变化。在更新应用程序的后台或文本颜色时更新梯级颜色非常重要。

默认情况下,离子阶梯式颜色从默认betway东盟体育app背景颜色值开始 #ffffff. 并与文本颜色值混合 #000000. 使用增加的百分比。步进颜色的完整列表显示在下面的发电机中。

阶梯式颜色发生器

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

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