主题是应用于整个应用程序和视图层的样式。IM UIKit 为了满足用户自定义主题样式的需求，提供一系列全局样式变量，您可以根据需要在自己项目中使用或者调整覆盖 UIKit 中的样式。

IM UIKit 中的组件是基于 antd 进行了 2 次封装，因此 IM UIKit 中主题分为 antd 组件主题样式和云信自定定义的主题样式。

如果您需要更改 antd 的组件样式请参考antd less变量。云信自己定义的主题变量主要是覆盖各组件内未使用 antd 组件的其余主题样式，例如包裹 antd 组件的容器、盒子边框、全局基色、字体大小等，我们遵循的是 antd 的组件主题样式沿用 antd 的变量来修改，云信自己定义的主题样式的可由我们的变量来修改。

样式变量

IM UIKit 样式使用 less 框架开发，定义了一系列全局样式变量，包括但不限于全局样式（主色、背景色、圆角、边框、字体大小）。

less// >>> 全局基础样式
@yx-primary-color: #ffffff; //全局基准色
@yx-primary-color-hover: #f7f9fa; //光标悬浮到 UI 控件后，UI 控件呈现的颜色
@yx-primary-color-active: #ebf3fc; // UI 控件被选中后呈现的颜色
@yx-primary-text-color: #333333; // 界面字符的颜色
@yx-primary-font-size: 14px;  //界面字符的字体大小
@yx-primary-button-color: #337eff; // 按钮的基础色
@yx-primary-border-radius: 4px;  // 边框圆角大小
@yx-primary-icon-color: #c1c8d1; // 图标的基础色
@yx-primary-reminder-color: #f24957; // 提醒信息的颜色（文字或图标）
@yx-primary-error-color: #e74646; // 错误信息的颜色 （文字或图标）
@yx-primary-success-color: #42c294; // 成功信息的颜色（文字或图标）
@yx-primary-dialog-others-box-color: #e8eaed; // 会话界面中聊天对象的聊天框的颜色
@yx-primary-dialog-myself-box-color: #d6e5f6; // 会话界面中自己的聊天框的颜色

// >>> 字体大小
@yx-font-size-12: @yx-primary-font-size - 2;
@yx-font-size-16: @yx-primary-font-size + 2;
@yx-font-size-17: @yx-primary-font-size + 3;
@yx-font-size-18: @yx-primary-font-size + 4;
@yx-font-size-20: @yx-primary-font-size + 6;
@yx-font-size-22: @yx-primary-font-size + 8;
@yx-font-size-23: @yx-primary-font-size + 9;
@yx-font-size-24: @yx-primary-font-size + 10;
@yx-font-size-32: @yx-primary-font-size + 18;

// >>> 边框圆角大小
@yx-border-radius-8: @yx-primary-border-radius + 4;
@yx-border-radius-10: @yx-primary-border-radius + 6;
@yx-border-radius-12: @yx-primary-border-radius + 8;
@yx-border-radius-16: @yx-primary-border-radius + 12;
@yx-border-radius-18: @yx-primary-border-radius + 14;

// >>> 背景色
@yx-background-color-1: #f6f8fa;
@yx-background-color-2: #e8eaed;
@yx-background-color-3: #d6e5f6;
@yx-background-color-4: #ecf0f4;
@yx-background-color-5: #d7e4ff;
@yx-background-color-6: #f1f5f8;

// >>> 图标颜色
@yx-icon-color-1: #656a72;
@yx-icon-color-2: #c1c8d1;

// >>> 界面字符（文本）颜色
@yx-text-color-1: #666666;
@yx-text-color-2: #999999;
@yx-text-color-3: #b3b7bc;
@yx-text-color-4: #2a6bf2;
@yx-text-color-5: #1890ff;

// >>> 边框颜色
@yx-border-color-1: #d3d5d7;
@yx-border-color-2: #f0f1f2;
@yx-border-color-3: #e4e9f2;
@yx-border-color-4: #dde0e5;
@yx-border-color-5: #d7e4ff;
@yx-border-color-6: #c1c8d1;
@yx-border-color-7: #dbe0e8;
@yx-border-color-8: #e6e6e6;
@yx-border-color-9: #ebedf0;

// >>> 按钮颜色
@yx-button-color-1: #f7f7f7;
@yx-button-color-2: #d9d9d9;
@yx-button-disabled-color-1: #f7f7f7;
@yx-button-disabled-color-2: #f7f7f7;

实现原理

通过 less 框架提供的 modifyVars 进行变量覆盖，从而实现主题的自定义设置。

1. 根据可编辑的样式变量，在您的工程构建配置文件中配置需要修改的变量。
2. 编译工程项目，覆盖 IM UIKit 的 less 变量，修改默认样式，实现主题换肤。

IM UIKit 基于 antd 开发，如需对 antd 进行主题设置，请参考 antd 定制主题。

定制方式

针对不同的业务场景，您可以根据使用的框架来选择具体的定制方式。

• 在 Umi 中，通过配置 theme 字段进行主题配置。
• 在 create-react-app 中，通过配置 less 变量文件并进行覆盖。
• 在 webpack.config.js 中， 使用 less-loader 进行定制。
• 上述都不满足后，可采取修改类名的方式进行定制。

Umi

如果您使用 Umi，那么可以直接在项目根目录的 .umirc.ts 或 config/config.ts 文件的 theme 字段进行主题配置。theme 可以设置为一个对象或文件路径。

查看在线示例，在 IMAppProps 传入正确的 appkey、account 和 token 即可在线预览效果。

// .umirc.ts
"theme": {
    "@yx-primary-color": "#1DA57A",
}

// 或

"theme": "./theme.js",

create-react-app

如果您使用 create-react-app，那么首先需要在您的 less 样式文件中引入 IM UIKit 的 less 变量文件，引入后可直接修改变量，然后进行覆盖。

@import '~@xkit-yx/common-ui/es/themes/variables.less' // less 变量文件
  @import 'your-theme-file.less'; // 用于覆盖上面定义的变量

webpack.config.js

如果您使用 webpack.config.js，那么需要使用 less-loader 进行定制。

module.exports = {
  rules: [
    {
      test: /\.less$/,
      use: [
        {
          loader: 'style-loader',
        },
        {
          loader: 'css-loader', // translates CSS into CommonJS
        },
        {
          loader: 'less-loader', // compiles Less to CSS
          options: {
            lessOptions: {
              // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
              modifyVars: {
                '@yx-primary-color': 'black',
              },
            },
          },
        },
      ],
    },
  ],
}

修改类名

如果以上 less 配置不满足您的需求，您还可以通过类名覆盖样式的方式定制样式。

.conversation-list {
  background-color: black;
}

界面展示

以下分别展示了默认主题界面和自定义主题界面。

默认主题界面：

自定义主题界面示例：