前言

各位开发者，大家好！我是若城。

在鸿蒙应用开发过程中，我发现许多组件样式和工具方法具有高度的复用性，但每次新项目都需要重复编写，这极大地降低了开发效率。因此，我决定投入半年时间，打造一款专为鸿蒙生态设计的 UI 组件库 —— rchoui。

项目简介

rchoui 是一个面向 HarmonyOS6 的企业级 UI 组件库，旨在提供开箱即用的高质量组件，让开发者告别"重复造轮子"。

核心特性

• 丰富组件：涵盖基础组件、表单组件、弹窗组件、布局组件等
• 设计规范：遵循统一的色彩体系和设计语言
• 工具集成：内置常用工具方法，提升开发效率
• 完善文档：每个模块都配有详细的设计思路和使用说明

开源计划

项目预计于 2026 年 7 月中旬正式开源，届时可通过三方库直接下载使用。在此期间，我会通过系列文章逐一介绍每个模块的设计思路与实现细节。

---

RcColors 色彩系统

模块概述

RcColors 是 rchoui 组件库的色彩系统模块，提供了一套科学、规范的主题色方案。通过统一的色彩标准，确保应用界面的视觉一致性和用户体验的连贯性。

核心优势：

• 预定义 5 大主题色系（Primary、Success、Error、Warning、Info）
• 每个色系包含标准、Dark、Light、Disabled 四种状态
• 支持全量引入和按需引入两种使用方式
• 开箱即用，无需手动配置色值

效果演示

以下展示了 RcColors 提供的完整色彩体系：

快速上手

方式一：通过 RcColors 对象访问

适合需要动态切换多个颜色的场景。

import { RcColors } from "rchoui"

@ComponentV2
export struct ColorsDemo {
  build() {
    Column() {
      Text('主题色')
        .fontColor(RcColors.RcPrimary)
      Text('成功提示')
        .fontColor(RcColors.RcSuccess)
      Text('错误提示')
        .fontColor(RcColors.RcError)
    }
  }
}

方式二：按需引入（推荐）

减少代码体积，提升可读性。

import { RcPrimary, RcSuccess, RcError } from "rchoui"

@ComponentV2
export struct ColorsDemo {
  build() {
    Column() {
      Text('主题色')
        .fontColor(RcPrimary)
      Text('成功提示')
        .fontColor(RcSuccess)
      Text('错误提示')
        .fontColor(RcError)
    }
  }
}

---

色彩设计规范

RcColors 的色彩设计遵循视觉直觉和功能语义相结合的原则。五大主题色在视觉上分别对应蓝色、绿色、红色、黄色和灰色，每个色系都包含四种状态变体，满足不同使用场景的需求。

主题色系（Primary）

代表品牌主色调，用于主要操作按钮、链接等核心交互元素。

export const RcPrimary = '#3c9cff'           // 标准态
export const RcPrimaryDark = '#398ade'       // 深色态（hover/active）
export const RcPrimaryDisabled = '#9acafc'   // 禁用态
export const RcPrimaryLight = '#ecf5ff'      // 浅色态（背景）

成功色系（Success）

用于表示操作成功、积极状态的反馈信息。

export const RcSuccess = '#5ac725'           // 标准态
export const RcSuccessDark = '#53c21d'       // 深色态
export const RcSuccessDisabled = '#a9e08f'   // 禁用态
export const RcSuccessLight = '#f5fff0'      // 浅色态

错误色系（Error）

用于警示错误、危险操作的提示信息。

export const RcError = '#f56c6c'             // 标准态
export const RcErrorDark = '#e45656'         // 深色态
export const RcErrorDisabled = '#f7b2b2'     // 禁用态
export const RcErrorLight = '#fef0f0'        // 浅色态

警告色系（Warning）

用于需要用户注意但非强制性的警告提示。

export const RcWarning = '#f9ae3d'           // 标准态
export const RcWarningDark = '#f1a532'       // 深色态
export const RcWarningDisabled = '#f9d39b'   // 禁用态
export const RcWarningLight = '#fdf6ec'      // 浅色态

信息色系（Info）

用于中性信息展示，如说明文本、辅助提示等。

export const RcInfo = '#909399'              // 标准态
export const RcInfoDark = '#767a82'          // 深色态
export const RcInfoDisabled = '#c4c6c9'      // 禁用态
export const RcInfoLight = '#f4f4f5'         // 浅色态

文本色系

分层级的文本颜色，确保信息层次清晰。

export const RcMainColor = '#303133'      // 主标题、重要文本
export const RcContentColor = '#606266'   // 正文内容
export const RcTipsColor = '#909193'      // 提示文本、次要信息
export const RcLightColor = '#c0c4cc'     // 占位符、禁用文本

背景与状态色

用于页面背景和组件状态标识。

export const RcBgColor = '#f3f4f6'        // 页面背景色
export const RcDisabledColor = '#c8c9cc'  // 禁用状态色

边框色系

提供四档边框颜色，适应不同视觉强度需求。

export const RcBorder1Color = '#9a9998'   // 强调边框
export const RcBorder2Color = '#b4b3b1'   // 标准边框
export const RcBorder3Color = '#ceccca'   // 次级边框
export const RcBorder4Color = '#e7e6e4'   // 淡化边框

---

设计理念

色彩状态说明

• 标准态（Standard）：组件的默认显示状态
• 深色态（Dark）：用于 hover、active 等交互状态，增强视觉反馈
• 浅色态（Light）：常用于背景填充，降低视觉强度
• 禁用态（Disabled）：表示不可操作状态，降低饱和度和对比度

使用建议

1. 语义化使用：根据功能含义选择色系（如成功提示用 Success，错误用 Error）
2. 保持一致性：同类操作在不同页面应使用相同的色彩方案
3. 注意对比度：确保文本与背景有足够的对比度（WCAG AA 标准）
4. 适度使用：避免在单一界面过度使用高饱和度色彩

---

总结

RcColors 作为 rchoui 组件库的基础模块，为整个设计系统提供了坚实的色彩基础。通过规范化的色彩定义，不仅提升了开发效率，更保证了应用的视觉一致性和品牌识别度。

在后续文章中，我将陆续介绍其他组件模块的设计与实现。如果你对本项目感兴趣，欢迎持续关注！