Web 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 或重新挂载即可生效。

平台覆盖方式​

平台覆盖入口生效范围
AndroidIMKitTheme.load(context, resValues, mode)；res/values/imkit_config.xml颜色 / 尺寸 / drawable 令牌
WebTheme.light/dark({ colors }) → IMKit.setup({ theme })CSS 变量 --imkit-*，作用于挂载容器
ElectronThemeProps（mode + colors）随 props 传入宿主 React 渲染层
FlutterImkitTheme + ImkitThemeScope / toThemeData()全部 Widget
Nativeim_kit_theme_load(json) / im_kit_theme_default(dark)view-model 输出的颜色令牌
iOSIMPTheme（struct，static func system()），Swift / Objective-C 双接口UIKit 全部组件
HarmonyOSTheme class（static system()），见 HarmonyOS 分区ArkUI 组件

主题示例​

JavaScript (ESM)
import { IMKit, Theme } from '@ni-paas/im-web/imkit';

const theme = Theme.dark({ primary: '#818CF8', bubbleMine: '#4f46e5' });
IMKit.setup({ theme, locale: 'zh-CN' });
IMKit.mount(document.getElementById('app'), 'ConversationListView', { conversations });

主题 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"
  }
}

相关文档​