Ionic ion-button组件color属性在Android端不生效问题求助

你遇到的跨端样式差异是Ionic自定义颜色配置错误导致的，iOS端WebView容错性更高兼容了错误写法，安卓端WebView对CSS语法校验更严格因此样式失效，具体错误点和修复方案如下：

错误点 #

• 自定义颜色类.ion-color-color1~.ion-color-white错误嵌套在:root{}块内，:root选择器下仅支持定义CSS变量，不能嵌套类选择器
• --ion-color-base-rgb属性值格式错误：Ionic要求该值必须为「逗号分隔的RGB三个数值」，你配置的#006039等十六进制值不符合要求，Ionic内部计算样式时会报错
• 暗色模式配置中未同步添加自定义颜色的变量定义，安卓设备开启暗色模式时会找不到对应颜色变量
• color3的--ion-color-base-rgb值配置错误，黑色对应的RGB值应为0,0,0，你配置的158, 156, 156是灰色值

修复方案 #

1. 修正基础样式结构 #

将自定义类从:root块中移出，同时修正RGB变量格式，修正后代码如下：

@import url('http://fonts.cdnfonts.com/css/century-gothic');
@font-face {
  font-family: 'Century Gothic', sans-serif;
}

:root {
/** 原有系统颜色变量保持不变 **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
/** secondary **/
--ion-color-secondary: #3dc2ff;
--ion-color-secondary-rgb: 61, 194, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #36abe0;
--ion-color-secondary-tint: #50c8ff;
/** tertiary **/
--ion-color-tertiary: #5260ff;
--ion-color-tertiary-rgb: 82, 96, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #4854e0;
--ion-color-tertiary-tint: #6370ff;
/** success **/
--ion-color-success: #006039;
--ion-color-success-rgb: 45, 211, 111;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255, 255, 255;
--ion-color-success-shade: #006039;
--ion-color-success-tint: #006039;
/** warning **/
--ion-color-warning: #ffc409;
--ion-color-warning-rgb: 255, 196, 9;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0ac08;
--ion-color-warning-tint: #ffca22;
/** danger **/
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235, 68, 90;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #cf3c4f;
--ion-color-danger-tint: #ed576b;
/** dark **/
--ion-color-dark: #222428;
--ion-color-dark-rgb: 34, 36, 40;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
--ion-color-dark-shade: #1e2023;
--ion-color-dark-tint: #383a3e;
/** medium **/
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146, 148, 156;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255, 255, 255;
--ion-color-medium-shade: #808289;
--ion-color-medium-tint: #9d9fa6;
/** light **/
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244, 245, 248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
/** 自定义颜色变量 **/
--ion-color-color1: #006039;
--ion-color-color2: #9e9c9c;
--ion-color-color3: black;
--ion-color-white: #ffffff;
}

/** 自定义颜色类移到:root外面 **/
.ion-color-color1 {
    --ion-color-base: #006039;
    --ion-color-base-rgb: 0, 96, 57;
    --ion-color-contrast: #ffffff;
    --ion-color-contrast-rgb: 255, 255, 255;
    --ion-color-shade: #006039;
    --ion-color-tint: #006039;
}
.ion-color-color2 {
    --ion-color-base: #9e9c9c;
    --ion-color-base-rgb: 158, 156, 156;
    --ion-color-contrast: #ffffff;
    --ion-color-contrast-rgb: 255, 255, 255;
    --ion-color-shade: #8b8a8a;
    --ion-color-tint: #c7c6c6;
}
.ion-color-color3 {
    --ion-color-base: black;
    --ion-color-base-rgb: 0,0,0;
    --ion-color-contrast: #ffffff;
    --ion-color-contrast-rgb: 255, 255, 255;
    --ion-color-shade: black;
    --ion-color-tint: black;
}
.ion-color-white {
    --ion-color-base: #ffffff;
    --ion-color-base-rgb: 255, 255, 255;
    --ion-color-contrast: #ffffff;
    --ion-color-contrast-rgb: 255, 255, 255;
    --ion-color-shade: #ffffff;
    --ion-color-tint: #ffffff;
}

2. 同步补充暗色模式的自定义颜色配置 #

在@media (prefers-color-scheme: dark)下的body、.ios body、.md body块中，添加自定义颜色变量，示例如下：

@media (prefers-color-scheme: dark) {
  body {
    /* 原有系统暗色模式变量全部保留，新增以下自定义颜色变量 */
    --ion-color-color1: #006039;
    --ion-color-color2: #9e9c9c;
    --ion-color-color3: black;
    --ion-color-white: #ffffff;
  }

  .ios body {
    /* 原有ios暗色变量全部保留，新增自定义颜色变量 */
    --ion-color-color1: #006039;
    --ion-color-color2: #9e9c9c;
    --ion-color-color3: black;
    --ion-color-white: #ffffff;
  }

  .md body {
    /* 原有md暗色变量全部保留，新增自定义颜色变量 */
    --ion-color-color1: #006039;
    --ion-color-color2: #9e9c9c;
    --ion-color-color3: black;
    --ion-color-white: #ffffff;
  }
}

3. 打包验证 #

修改完成后清除项目缓存，重新打包安卓应用即可看到样式生效。

内容的提问来源于stack exchange，提问作者Morpheus