HarmonyOS7 颜色 Token 让主题更稳：ArkUI/ArkTS 实战拆解-平芜编程栈

文章目录

- - 前言
  - 为什么这个问题经常被写乱
  - 场景：品牌页接入深色模式
  - 常用颜色语义
  - 实操步骤
  - 先把页面目标想清楚
  - 完整示例：语义颜色驱动品牌页
  - 把关键代码一段段拆开
  - 容易踩坑的点
  - 优化建议
  - 颜色 Token 要先分清语义
  - 写在最后

前言

颜色 token 的重点不是把色值藏起来，而是让颜色具备语义。品牌色、危险色、辅助文字、页面背景这些角色稳定了，主题切换才不会牵一发动全身。

这篇单独聊品牌页这个场景。重点不是堆 API，而是把品牌色、危险色、辅助文字和背景色按语义收口，避免主题切换时到处改组件。

为什么这个问题经常被写乱

颜色 Token 让主题更稳这类内容很容易被写成“代码能跑就算讲完了”，但对初学者来说，这恰恰是最不够的地方。真正让人卡住的，往往不是某个组件名记不住，而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。

所以这篇文章不只想给你一个能跑的例子，更想把背后的判断过程讲清楚。你只要把这个判断过程吃透，后面自己改页面、补需求、查问题时，心里会稳很多。

场景：品牌页接入深色模式

颜色 token 最容易在项目中后期暴露价值。早期页面少，按钮直接写#0A59F7，危险操作直接写#D92D20，看起来没什么问题。等品牌升级、深色模式上线、营销页要换主题时，散落在页面里的色值就会变成维护成本。

品牌页尤其明显：主按钮、选中态、活动标签、说明文字、分割线、卡片背景都和颜色有关。如果每个组件都直接绑定一个具体色值，主题切换时就要到处改。语义 token 的做法是让组件只关心“这是品牌色”“这是危险色”“这是弱文本”，不关心它今天具体是哪个蓝。

颜色 token 的价值不是少写几个色值，而是让主题变更不会扩散到每个组件。

常用颜色语义

Token	浅色值	深色值	用途
`colorBrand`	`#0A59F7`	`#6EA8FF`	主按钮、选中态
`colorDanger`	`#D92D20`	`#FF8A80`	删除、异常
`colorSuccess`	`#0A7F3F`	`#62D28F`	成功、完成
`colorTextPrimary`	`#111111`	`#F2F4F8`	主文案
`colorTextSecondary`	`#666666`	`#B8C0CC`	辅助说明
`colorPageBg`	`#F5F7FA`	`#111318`	页面背景
`colorCardBg`	`#FFFFFF`	`#1C2028`	卡片背景

实操步骤

先按语义列出页面用色，不要按色相列blue1、red2。
页面组件只引用 token 方法，不直接散写色值。
深浅主题切换时只改变 token 返回值，不改页面结构。
危险、成功、品牌三个语义要分开，不能拿品牌色硬顶所有状态。
检查卡片背景和页面背景的层级，暗色模式下尤其容易糊成一片。

先把页面目标想清楚

在真正写代码之前，先别急着盯着 API。更有用的做法是先想清楚：这个页面到底想解决什么问题，用户最在意的反馈是什么，哪些状态必须一直保持一致。

当你先把这条主线想明白，再回头看组件和状态设计，很多选择都会顺理成章。对小白来说，这一步尤其重要，因为它能帮你从“照着抄”慢慢过渡到“看得懂、改得动”。

完整示例：语义颜色驱动品牌页

@Entry@Componentstruct ColorTokenPage{@StatedarkMode:boolean=false@StateselectedPlan:string='pro'privatebrand():string{returnthis.darkMode?'#6EA8FF':'#0A59F7'}privatedanger():string{returnthis.darkMode?'#FF8A80':'#D92D20'}privatesuccess():string{returnthis.darkMode?'#62D28F':'#0A7F3F'}privatetextPrimary():string{returnthis.darkMode?'#F2F4F8':'#111111'}privatetextSecondary():string{returnthis.darkMode?'#B8C0CC':'#666666'}privatepageBg():string{returnthis.darkMode?'#111318':'#F5F7FA'}privatecardBg():string{returnthis.darkMode?'#1C2028':'#FFFFFF'}@BuilderPlanCard(name:string,price:string,plan:string){Column({space:8}){Row(){Text(name).fontSize(18).fontWeight(FontWeight.Bold).fontColor(this.textPrimary())Blank()Text(this.selectedPlan===plan?'已选':'可选').fontSize(12).fontColor(this.selectedPlan===plan?this.success():this.textSecondary())}.width('100%')Text(price).fontSize(24).fontWeight(FontWeight.Bold).fontColor(this.brand())Text('颜色来自语义 token，主题变化时组件不用改。').fontSize(13).fontColor(this.textSecondary())Button(this.selectedPlan===plan?'当前方案':'选择方案').enabled(this.selectedPlan!==plan).backgroundColor(this.brand()).onClick(()=>this.selectedPlan=plan)}.alignItems(HorizontalAlign.Start).padding(14).backgroundColor(this.cardBg()).borderRadius(8)}build(){Column({space:14}){Row(){Text('主题预览').fontSize(22).fontWeight(FontWeight.Bold).fontColor(this.textPrimary())Blank()Toggle({type:ToggleType.Switch,isOn:this.darkMode}).onChange((value:boolean)=>this.darkMode=value)}.width('100%')this.PlanCard('专业版','¥129/月','pro')this.PlanCard('团队版','¥399/月','team')Button('删除试用数据').width('100%').backgroundColor(this.danger())}.padding(16).height('100%').backgroundColor(this.pageBg())}}