关注HarmonyOS的小伙伴肯定对服务卡片已经很熟悉了。服务卡片（也简称为“卡片”）是FA（FeatureAbility，元服务）的一种界面展示形式，将FA的重要信息或操作前置到卡片，以达到服务直达，减少体验层级的目的。类似手机上应用的换肤，服务卡片也支持换肤。本期，我们就来聊一聊卡片换肤。
一、“卡片换肤”换的是什么？
服务卡片的UI界面由一系列的资源组成，这些资源包括颜色、文本、图标和圆角等等。不同资源有对应的资源ID，通过替换资源ID对应的资源就可以实现换肤。
为了让大家更了解卡片换肤，下面来看两个示例：
1.更改卡片的圆角大小。
2.更改卡片的背景颜色和文字颜色。
通过上面两个示例，我们看到：通过修改卡片的圆角资源参数、背景颜色、文本颜色等就对卡片进行了简单的换肤。实际场景中，我们还可以对图标、多彩色板、切图资源等各类卡片资源进行修改和替换，实现更复杂的换肤。
二、如何实现卡片换肤？
卡片换肤需要应用开发者、主题开发者和系统三者的配合。卡片换肤的整体流程如图3所示。
卡片换肤流程说明如下：
步骤一：应用开发者在开发卡片时，可以自定义卡片的各项资源及其资源ID。
步骤二：主题开发者在开发主题包时会使用新的资源来替换资源ID对应的资源信息。
步骤三：用户下载和安装主题包后，在切换主题时，由系统自动完成卡片相应的资源替换，从而达到卡片换肤的目的。
下面我们以JS卡片为例分别从应用开发者、主题开发者、系统三者的角度来介绍卡片换肤的实现方案。
1. 应用开发者：开发卡片
JS卡片工程中，应用开发者可以使用的资源，包括三类：JS模块资源、应用资源和系统资源。下面一一介绍如何引用这三类资源。
（1）JS模块资源
JS模块资源指的是src/main/js/Component下resources目录中的资源，如图4所示。
此类资源的主要特点是只能在该JS模块范围内引用。引用方法一般为在应用开发的hml和js文件中使用$r的语法，对JS模块内resources目录下的json资源进行格式化，获取相应的资源内容。
下面我们通过一个示例来说明JS模块资源的引用方法。
例如，resources/res-defaults.json中定义了以下资源：
{
"image": {
"clockFace": "common/face.png"
},
"colors": {
"background": "#ffffff"
}
}
在hml文件中可以通过{{ $r('colors.background') }}和{{ $r('image.clockFace') }}分别引用上面定义的background和clockFace资源。代码如下：
（2）应用资源
应用资源指的是与java、js目录同级的resources目录中的资源，如图5所示。
应用资源的特点是所有JS模块共享，可认为是应用内共享。从API Version 6开始，可以在hml/css/json文件中引用应用资源，包括颜色、圆角和图片类型的资源。
在css文件中，通过“@app.type.resource_id”的形式引用应用资源。
在hml文件中，通过“{{$r('app.type.resource_id')}}”的形式引用应用资源。
在json文件中，通过“this.$r('app.type.resource_id')”的形式引用应用资源。
其中，“app”是固定字符串，代表应用资源。“type”表示引用的资源类型，可以取值为“color”（颜色）、“float”（圆角）和“media”（图片）。“resource_id”表示应用资源ID，取值为color.json或float.json中的“name”字段值，或者media目录中图片文件的名称（不包含图片类型后缀）。
下面我们通过一个示例来说明应用资源的引用方法。
例如，color.json中定义了背景色和前景色两个资源：
{
"color": [
{
"name": "my_background_color",
"value": "#ffff0000"
},
{
"name": "my_foreground_color",
"value": "#ff0000ff"
}
]
}
其中，背景色资源ID为my_background_color，前景色资源ID为my_foreground_color。
在css文件中可以通过@app.color.my_background_color引用背景色资源，代码如下：
.divA {
background-color: "@app.color.my_background_color";
border-radius: "@app.float.my_radius";
}
在hml文件中可以通过{{$r('app.color.my_background_color')}}引用背景色资源，代码如下：
{
"data":{
"myColor": "this.$r('app.color.my_background_color')",
"myRadius": "this.$r('app.float.my_radius')",
"myImage":"this.$r('app.media.my_background_image')"
}
}
（3）系统资源
系统资源指的是系统预置的资源。HarmonyOS为服务卡片提供了一系列统一的资源ID标识，这些标识在系统中对应了默认的资源信息。这些资源不在应用工程中，但应用可以通过特定的语法来访问。（系统资源的详细信息可参考文末链接。）
系统资源的特点是所有应用均可访问，但具体的资源内容或资源值是根据应用的上下文获取到的。从API Version 6开始，在hml/css/json文件中可以引用系统资源，包括颜色、圆角和图片类型的资源。系统资源的引用方法与应用资源比较类似，只是资源前缀由“app”换成“sys”了，“sys”代表系统资源。
在css文件中，通过“@sys.type.resource_id”的形式引用系统资源。
.divA {
background-color: "@sys.color.fa_background";
border-radius: "@sys.float.fa_corner_radius_card";
}
在hml文件中，通过“{{$r('sys.type.resource_id')}}”的形式引用系统资源。