高级主题

基于CSS的主题使应用程序通过加载CSS文件或更改几个CSS属性值来快速自定义颜色。

全局

虽然主题部分中的应用程序和阶梯变量对于更改应用程序的颜色非常有用，但通常需要在多个组件中使用的变量。以下变量在组件中共享以更改全局填充设置等。

应用程序变量

姓名	描述
`- inion-font-family`	字体的应用程序
`-ion-statusbar-padding`	statusbar填充应用的顶部
`- 安全区域 - 顶部`	调整安全区域插图APP的顶部
`- 安安全区域`	调整应用程序的安全区域INSET右侧
`- 安全区域底部`	调整应用程序的安全区域插图底部
`- 安安全区域左`	调整应用程序剩下的安全区域
`- 期边缘`	调整余量保证金属性
`- 填充`	调整填充物填充属性

网格变量

姓名	描述
`-ion-grid列`	网格中的列数
`-ion-grid-padding-xs`	用于XS断点的网格填充
`-ion-grid-padding-sm`	用于SM断点的网格填充
`-ion-grid-padding-md`	用于MD断点的网格填充
`-ion-grid-padding-lg`	用于LG断点的网格填充
`-ion-grid-padding-xl`	用于XL断点的网格填充
`-ion-grid-column-padding-xs`	用于XS断点的网格列的填充
`-ion-grid-column-padding-sm`	用于SM断点的网格列的填充
`-ion-grid-column-padding-md`	用于MD断点的网格列的填充
`-ion-grid-column-padding-lg`	用于LG断点的网格列的填充
`-ion-grid-column-padding-xl`	用于XL断点的网格列的填充

已知的限制

alpha问题

还没有满了浏览器支持用于alpha使用六角颜色。这 RGBA（）函数只接受一个值r，g，b，a （红色，绿色，蓝色，alpha）格式。以下代码显示了传递给的正确和错误值的示例RGBA（） 。


              / *这些例子使用相同的颜色：BlueViolet。* /
             
              。破碎的
             
              {
             
              - 紫色
              ：
             ＃8a2be2
              ;
             
              / * rgba（＃8a2be2，.5）* /
             
              颜色
              ：
             
              RGBA.
              （
              var.
              （
             - 紫色
              的）
              那
             .5
              的）
             
              /* 错误！不支持十六进制。* /
             
              }
             
              。在职的
             
              {
             
              -  violet-RGB.
              ：
             138.
              那
             43.
              那
             226.
              ;
             
              / * RGBA（138,43,226，.5）* /
             
              颜色
              ：
             
              RGBA.
              （
              var.
              （
             -  violet-RGB.
              的）
              那
             .5
              的）
             
              / *工作！* /
             
              }

复制复制

看看 CSS变量有关如何获取和设置CSS变量的更多信息。

betway东盟体育app离子在几个组件中使用具有不透明度（alpha）的颜色。为了使其工作，必须以RGB格式提供这些属性。在更改具有结尾变体的任何属性时-RGB. ，重要的是它们也以逗号分隔格式提供 没有括号 。以下是更改文本和背景颜色的一些示例。


              ：根
             
              {
             
              / *这些例子使用相同的颜色：Sienna。* /
             
              -ion-text-color
              ：
             ＃a0522d.
              ;
             
              -ion-text-color-rgb
              ：
             160.
              那
             82.
              那
             45.
              ;
             
              / *这些示例使用相同的颜色：LightSteelBlue。* /
             
              -  ulion-background-color
              ：
             ＃b0c4de.
              ;
             
              -ion-background-color-rgb
              ：
             176.
              那
             196.
              那
             222.
              ;
             
              }

复制复制

请注意，RGB格式的颜色与十六进制属性完全相同，但现在可以使用RGBA（） 。例如，-ion-text-color-rgb 现在可以用以下方式使用


              身体
             
              {
             
              颜色
              ：
             
              RGBA.
              （
              var.
              （
             -ion-text-color-rgb
              的）
              那
             0.25
              的）
              ;
             
              }

复制复制

媒体查询中的变量

CSS变量in. 媒体查询目前尚未得到支持，但有开放的草稿要添加自定义媒体查询和自定义环境变量这将解决这个问题！但是，随着当前的支持状态，以下将不是工作：


              ：根
             
              {
             
              - 破坏者
              ：
             600px.
              ;
             
              }
             
               @媒体
              
               （
               最小宽度
               ：
              
               var.
               （
              - 破坏者
               的）
               的）
             
              {
             
              / *不起作用:( * /
             
              }

复制复制

修改CSS颜色变量

虽然可以使用其内置功能轻松改变SASS中的颜色，但目前不像修改CSS变量中的颜色一样容易。这可以通过分割CSS来完成 RGB. 或者 HSL. 通道并修改每个值，但它是复杂的并且功能缺失。

这到底是什么意思？基本上，使用CSS预处理器，例如SASS，允许我们使用功能来操纵单个颜色。例如，我们可以在SASS中创建以下颜色：


              //背景颜色，阴影和色调
             
               $背景
              ：
             ＃3880ff
              ;
             
               $背景阴影
              ：
             
              混合
              （
             ＃000.
              那
             
              $背景
              那
             12％
              的）
              ;
             
               $背景 - 色调
              ：
             
              混合
              （
             #fff.
              那
             
              $背景
              那
             10％
              的）
              ;
             
              //文字颜色，较暗和更轻
             
               $文本
              ：
             ＃444.
              ;
             
               $文本较暗
              ：
             
              变暗
              （
              $文本
              那
             15.
              的）
              ;
             
               $文本打火机
              ：
             
              减轻
              （
              $文本
              那
             15.
              的）
              ;

复制复制

遍历SASS编译器后，颜色将具有以下值：

多变的	价值
`$背景`	`＃3880ff`
`$背景阴影`	`＃3171e0`
`$背景 - 色调`	`＃4c8dff`
`$文本`	`＃444444`
`$文本较暗`	`＃1e1e1e.`
`$文本打火机`	`＃6a6a6a`

但是，由于CSS变量可以在运行时设置，并且更为动态，因此目前无法使用简单功能操纵它们。

这通常不是问题，但当应用程序需要具有动态主题时，它会出现问题。在离子betway东盟体育app中，这就是存在的原因对每种颜色的变化，这也是原因踩着颜色是主题所必需的。

有草稿和问题讨论颜色修改建议这将使这成为可能。