Skip to content

深色模式 ​

网站切到深色,聊天按钮和聊天窗跟着一起切。

大部分情况不用写代码 ​

在工作台把 设置 > 渠道管理 > 聊天窗口 的 深浅色模式 设成 跟随访客系统,聊天窗就会跟着客户的环境走:客户的系统是深色,聊天窗就是深色。

客户中途切换系统深色、或者在你的网站上点了主题开关,聊天窗实时跟着变,不用刷新页面。

工作台那三档的区别:

选项效果
跟随访客系统跟着客户的环境走
浅色始终浅色,不跟随
深色始终深色,不跟随

深色的配色不用你自己配,工作台里选的模板会自动生成深色版本。

网站切了主题,聊天窗没跟上 ​

「跟随访客系统」读的是网站 <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')
})

接在你自己的主题切换函数里,切换时调一次即可。

下一步 ​