Appearance
深色模式
网站切到深色,聊天按钮和聊天窗跟着一起切。
大部分情况不用写代码
在工作台把 设置 > 渠道管理 > 聊天窗口 的 深浅色模式 设成 跟随访客系统,聊天窗就会跟着客户的环境走:客户的系统是深色,聊天窗就是深色。
客户中途切换系统深色、或者在你的网站上点了主题开关,聊天窗实时跟着变,不用刷新页面。
工作台那三档的区别:
| 选项 | 效果 |
|---|---|
| 跟随访客系统 | 跟着客户的环境走 |
| 浅色 | 始终浅色,不跟随 |
| 深色 | 始终深色,不跟随 |
深色的配色不用你自己配,工作台里选的模板会自动生成深色版本。
网站切了主题,聊天窗没跟上
「跟随访客系统」读的是网站 <html> 上的标准属性 color-scheme,读不到就回落到客户的系统偏好。
有些网站切深色时只改了自己的 class,例如 <html class="dark">,没有声明 color-scheme——这种情况读不到,需要在你的主题切换函数里补一行:
js
hc.setColorScheme('dark') // 'light' | 'dark' | 'auto'传 'auto' 表示交还给 SDK 自动跟随环境。
color-scheme: light dark 不算表态
按 CSS 规范,两个值并列表示「两种都支持」,是能力声明不是当前档位,SDK 不拿它当依据。切换主题时要写成单个值(color-scheme: dark)才读得到。
优先级
越具体的越优先:
| 优先级 | 来源 |
|---|---|
| 1(最高) | 代码里显式指定:setColorScheme()、链接的 cs 参数、APP 发来的命令。后设置的覆盖先设置的 |
| 2 | 工作台配的 浅色 或 深色 |
| 3 | 跟随环境:网站的 color-scheme → 客户的系统偏好 |
有两点容易问到:
- 工作台配了「浅色」或「深色」就是强制档,不跟随环境。想跟随得配「跟随访客系统」。
- 但代码里显式指定可以压过工作台的配置——传参的就是你自己,以更具体的那个为准。显式传
'auto'表示明确要求跟随环境,此时工作台的强制档也不拦。
这不是改颜色的接口
传的只是浅色、深色、跟随三选一,实际用哪套配色仍然是工作台里配好的那套。
要改主题色、换配色方案,入口只有工作台一个:设置 > 渠道管理 > 聊天窗口。
在网页接入里怎么调
拿到命令对象之后调用:
js
window.hecong(function (hc) {
hc.setColorScheme('dark')
})接在你自己的主题切换函数里,切换时调一次即可。