Ionic 颜色系统全解析（2025 年最新版，Ionic 7/8 通用）中文最全讲解
Ionic 内置了一套非常漂亮、支持动态换肤（明暗模式）的颜色系统，你只需要记住几个名字就能搞定 90% 的界面。
1. 9 个官方主色（直接使用，最常用！）
| 颜色名称 | 变量名 | 十六进制（亮模式） | 说明 | 典型用法 |
|---|---|---|---|---|
| primary | --ion-color-primary | #3880ff | 主色（蓝色） | 按钮、标题、选中状态 |
| secondary | --ion-color-secondary | #0cd1e8 | 副色（青色） | 强调按钮、标签 |
| tertiary | --ion-color-tertiary | #7044ff | 三级色（紫色） | 创意按钮、装饰 |
| success | --ion-color-success | #10dc60 | 成功（绿色） | 成功提示、确认按钮 |
| warning | --ion-color-warning | #ffce00 | 警告（黄色） | 提醒、待处理 |
| danger | --ion-color-danger | #f04141 | 危险（红色） | 删除、错误提示 |
| dark | --ion-color-dark | #222428 | 深色文字、边框 | 文字、分割线 |
| medium | --ion-color-medium | #989aa2 | 中等灰（辅助文字） | 副文字、placeholder |
| light | --ion-color-light | #f4f5f8 | 浅色背景、卡片 | 卡片背景、浅色按钮 |
使用方法超简单：
<ion-button color="primary">主按钮</ion-button>
<ion-button color="success">成功</ion-button>
<ion-button color="danger">删除</ion-button>
<ion-badge color="warning">99+</ion-badge>
<ion-text color="medium">辅助文字</ion-text>2. 颜色深浅变体（自动生成！）
每种主色都自动生成了 3 个深浅版本：
| 后缀 | 说明 | 示例（primary） |
|---|---|---|
| （无） | 标准色 | #3880ff |
| shade | 深一点 | #3171e0 |
| tint | 浅一点 | #4c8dff |
| contrast | 对比色（通常白色或黑色） | #ffffff |
用法：
<!-- 背景用 shade，文字用 contrast -->
<ion-item color="primary" class="ion-text-white">
<!-- 或者直接 -->
<ion-item color="primary-shade">
<ion-item color="primary-tint">3. 全局自定义颜色（最常用技巧）
在 src/theme/variables.scss（或 variables.css）里加几行就行：
// 示例1：把主色改成微信绿
--ion-color-primary: #07c160;
--ion-color-primary-rgb: 7, 193, 96;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-shade: #06a94f;
--ion-color-primary-tint: #1ac865;
// 示例2：新增一个橙色（比如品牌色）
--ion-color-orange: #ff9500;
--ion-color-orange-rgb: 255, 149, 0;
--ion-color-orange-contrast: #ffffff;
--ion-color-orange-shade: #e08700;
--ion-color-orange-tint: #ffa01a;然后全局就能直接用：
<ion-button color="orange">橙色按钮</ion-button>4. 动态换肤（亮/暗模式）终极方案（2025 推荐写法）
// variables.scss
:root {
--ion-color-primary: #3880ff;
--ion-color-primary-contrast: #ffffff;
}
.dark {
--ion-color-primary: #4c8dff; // 暗模式下主色变浅一点更清晰
--ion-color-primary-contrast: #000000;
--ion-color-background: #121212; // 背景深色
--ion-color-text: #ffffff;
}页面切换：
// 任意地方调用
document.body.classList.toggle('dark');5. 文字颜色快速写法（超级常用）
<ion-text color="primary">主色文字</ion-text>
<ion-text color="success">绿色文字</ion-text>
<ion-text color="dark">黑色文字</ion-text>
<ion-text color="medium">灰色辅助文字</ion-text>
<ion-text color="light">白色文字（常用于深色背景）</ion-text>6. 实用的配色组合（直接抄）
| 场景 | 背景颜色 | 文字/图标颜色 | 示例代码 |
|---|---|---|---|
| 成功提示 | success | light | <ion-item color="success"><ion-text color="light"> |
| 警告卡片 | warning | dark | <ion-card color="warning"> |
| 危险按钮 | danger | light | <ion-button color="danger">删除</ion-button> |
| 重要信息 | primary | light | <ion-badge color="primary">新</ion-badge> |
| 夜间模式卡片 | dark | light | <ion-card color="dark"> |
一句话总结
学会这 9 个名字 + color=”xxx” + 全局 variables.scss 改颜色，你就能搞定 Ionic 所有配色！
需要我直接给你一个「2025 年最新 Ionic 8 完整配色主题包」（包含微信绿、抖音红、暗黑模式、品牌色扩展）吗？
直接回复「发我」就行～
