主题令牌(Theme)

主题令牌:Theme 是 IDL 定义的跨端 UI 组件,props / events / behaviors 在各平台语义一致。本页给出契约属性、事件、渲染行为、数据源与 Electron 端绑定/示例。

契约属性(props)​

属性类型必填说明
mode'light'|'dark'是light / dark
colors{primary,background,surface,text,textSecondary,bubbleMine,bubbleOther,danger,mention}是主题颜色令牌集合:{ primary:, background:, surface:, text:, textSecondary:, bubbleMine:, bubbleOther:, danger:, mention: }

事件​

该组件未声明事件;交互通过属性和宿主回调完成。

渲染行为​

  • 默认跟随系统;宿主可覆盖令牌;暗色对比度满足可读性

数据源​

未在 IDL 声明 dataSource;由宿主从 IMLib 拉取(getConversationList / getHistoryMessages / MESSAGES / CONVERSATION 事件)。

依赖边界

组件不直连网络与数据库:会话/消息由宿主从 IMLib 拉取后传入,组件只做排序、角标、格式化与渲染。

平台绑定​

项值
公开符号 / 签名Theme(props: {mode: 'light' | 'dark'; colors: {primary: string; background: string; surface: string; text: string; textSecondary: string; bubbleMine: string; bubbleOther: string; danger: string; mention: string}}) // 可与主进程 nativeTheme 联动
导出列表包含是
UI 框架React 组件(props 契约),宿主渲染;组件不直连网络 / DB / IPC

使用示例​

JavaScript / TypeScript
// ThemeProps:mode + colors(9 令牌),可与主进程 nativeTheme 联动
const theme = {
  mode: 'dark',
  colors: {
    primary: '#818CF8',
    background: '#0F172A',
    surface: '#1E293B',
    text: '#E2E8F0',
    textSecondary: '#94A3B8',
    bubbleMine: '#4F46E5',
    bubbleOther: '#1E293B',
    danger: '#F87171',
    mention: '#A5B4FC',
  },
};
IMKit.mount(container, 'ConversationListView', { conversations, theme });

相关文档​