iOS IMKit 主题定制
IMKit 主题由 IDL Theme 组件统一约束:一个 mode(light / dark)加 9 个颜色令牌。组件只读令牌,不硬编码颜色,因此换肤不需要改组件源码。
主题令牌
| 令牌 | 含义 | Web 默认亮色 | Web 默认暗色 |
|---|---|---|---|
primary | 品牌主色(发送按钮、链接、选中态) | #4f46e5 | #818cf8 |
background | 页面背景 | #f5f6fa | #0f172a |
surface | 卡片 / 列表项 / 输入区背景 | #ffffff | #1e293b |
text | 主文本颜色 | #1f2430 | #e2e8f0 |
textSecondary | 次要文本(时间、状态、占位) | #7a8194 | #94a3b8 |
bubbleMine | 本人消息气泡背景 | #4f46e5 | #4f46e5 |
bubbleOther | 对方消息气泡背景 | #ffffff | #1e293b |
danger | 发送失败 / 危险操作 | #dc2626 | #f87171 |
mention | @ 提及角标与高亮 | #4f46e5 | #a5b4fc |
上表默认值来自 Web IMKit 实现;Android / Flutter / Electron / Native 的默认色板按各自设计系统提供,宿主都可以用同一组令牌覆盖。
暗色模式
mode = dark时组件读取暗色令牌;mode = light读取亮色令牌。- Web / Electron 支持跟随系统(
prefers-color-scheme/nativeTheme);Flutter 通过 MaterialApp 的theme/darkTheme;Android 通过IMKitTheme.Mode.SYSTEM。 - 切换主题不需要重建 IMLib 客户端;门面 update 或重新挂载即可生效。
平台覆盖方式
| 平台 | 覆盖入口 | 生效范围 |
|---|---|---|
| Android | IMKitTheme.load(context, resValues, mode);res/values/imkit_config.xml | 颜色 / 尺寸 / drawable 令牌 |
| Web | Theme.light/dark({ colors }) → IMKit.setup({ theme }) | CSS 变量 --imkit-*,作用于挂载容器 |
| Electron | ThemeProps(mode + colors)随 props 传入 | 宿主 React 渲染层 |
| Flutter | ImkitTheme + ImkitThemeScope / toThemeData() | 全部 Widget |
| Native | im_kit_theme_load(json) / im_kit_theme_default(dark) | view-model 输出的颜色令牌 |
| iOS | IMPTheme(struct,static func system()),Swift / Objective-C 双接口 | UIKit 全部组件 |
| HarmonyOS | Theme class(static system()),见 HarmonyOS 分区 | ArkUI 组件 |
主题示例
Objective-C 示例已隐藏(含未导出符号)
该示例引用了 SDK 头文件未导出的符号(多为 Swift 专用 helper)。请使用下表真实 ObjC 类,或参考对应组件页的 Objective-C 接入说明。
| 可用 ObjC 类 | 用途 |
|---|---|
IMPOSClient | IMLib 客户端(连接、消息、会话、群组等) |
IMPOSChatViewController | IMKit 会话页(真实 ObjC 类) |
IMPOSConversationListViewController | IMKit 会话列表页(真实 ObjC 类) |
IMPOSGlobalChatViewController | Global UIKit 会话页(真实 ObjC 类) |
IMPOSGlobalChatListViewController | Global UIKit 会话列表页(真实 ObjC 类) |
var theme = IMPTheme.system()
theme.colors.primary = "#4F46E5"
print(theme.mode)主题 JSON 约定
跨端推荐用同一份主题 JSON 描述(Native 直接消费;其它端映射为各自 Theme 对象):
theme.json
{
"mode": "dark",
"colors": {
"primary": "#818CF8",
"background": "#0F172A",
"surface": "#1E293B",
"text": "#E2E8F0",
"textSecondary": "#94A3B8",
"bubbleMine": "#4F46E5",
"bubbleOther": "#1E293B",
"danger": "#F87171",
"mention": "#A5B4FC"
}
}