Ionic色彩系统全解析

Ionic 颜色系统概述

Ionic 框架内置了一套完善的色彩系统，基于 CSS 变量实现动态主题切换。默认提供九种基础颜色（primary、secondary、tertiary、success、warning、danger、dark、medium、light），每种颜色包含多个色调（shade）和透明度变体。

基础颜色定义与使用

在 src/theme/variables.scss 中可全局定义颜色变量。以下示例修改 primary 颜色为深蓝色：

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

组件中直接通过属性应用颜色：

<ion-button color="primary">主要按钮</ion-button>
<ion-badge color="danger">警告标签</ion-badge>

自定义颜色扩展

新增自定义颜色需在 SCSS 中注册。以下添加 brand 颜色：

:root {
–ion-color-brand: #ff5722;
/* 自动生成 contrast/shade/tint 的实用函数 */
@include generate-color-variables('brand', #ff5722);
}

组件中使用方式与内置颜色一致：

<ion-tab-button color="brand">自定义标签</ion-tab-button>

动态颜色切换

利用 CSS 变量实现运行时主题切换。JavaScript 控制颜色变量：

document.documentElement.style.setProperty('–ion-color-primary', '#ff0000');

SCSS 中定义暗黑模式：

@media (prefers-color-scheme: dark) {
:root {
–ion-color-primary: #4c8dff;
–ion-background-color: #121212;
}
}

颜色工具函数

Ionic 提供颜色处理工具函数。调整颜色透明度示例：

ion-content {
background: rgba(var(–ion-color-primary-rgb), 0.1);
}

生成渐变色背景：

.header-gradient {
background: linear-gradient(
to right,
var(–ion-color-primary),
var(–ion-color-secondary)
);
}

组件层级颜色控制

特定组件可覆盖全局颜色设置。卡片组件自定义示例：

ion-card {
–background: var(–ion-color-light);
–color: var(–ion-color-dark);
}

色彩对比度测试

确保颜色组合满足 WCAG 标准。使用在线工具测试对比度：

// 计算两种颜色的对比度
function getContrastRatio(color1, color2) {
const luminance1 = getLuminance(color1);
const luminance2 = getLuminance(color2);
return (Math.max(luminance1, luminance2) + 0.05) / (Math.min(luminance1, luminance2) + 0.05);
}

响应式色彩方案

根据平台自动适配色彩风格。iOS/Material 设计差异处理：

.ios {
–ion-toolbar-background: var(–ion-color-primary);
}
.md {
–ion-toolbar-background: var(–ion-color-primary-shade);
}

颜色与状态管理

结合状态变化动态调整颜色。按钮激活状态示例：

ion-button {
–background-activated: var(–ion-color-primary-tint);
}