功能介绍
概述
腾讯会议从3.26版本开始支持深色模式，用户可在设置/常规设置 中来进行外观设置。
第三方应用通过本文介绍的方式感知外观模式的变化，在 UI 上作出适当的调整。
表现
应用市场在深色模式、浅色模式下的具体样式参考：
深色模式下的应用市场：
浅色模式下的应用市场：
接口描述
应用可从 userAgent 获取初始模式，监听 JSAPI event
app-theme-changed 感知模式变化。userAgent：浅色模式时包含
app_theme/light ；深色模式时包含app_theme/dark 。代码示例
获取初始模式
html 文件中写入以下代码：
var userAgent = window.navigator.userAgent; var __defaultTheme = isApp && /app_theme\\\\/dark/i.test(userAgent.toLowerCase()) ? 'dark' : 'light'; // 跳转新页面场景，获取当前模式 var __changedTheme = window.sessionStorage.getItem('wm_app_theme'); if (__changedTheme) { __defaultTheme = __changedTheme; } document.querySelector('html').setAttribute('theme', __defaultTheme);
注意：
webview 加载后，用户切换模式，userAgent 不变。如果期望实时跟随模式改变页面样式，需监听模式变化。
监听模式变化
import { event } from '@tencent/wemeet-js-sdk'; // themeType: "dark" | "light" const themeChangeCallback = ({ themeType }) => { const curTheme = themeType || (document.querySelector('html')?.getAttribute('theme') === 'dark' ? 'light' : 'dark'); document.querySelector('html')?.setAttribute('theme', curTheme); // 使用 sessionStorage 记录最新模式，以在跳转新页面后，正确获取当前模式 window.sessionStorage.setItem('wm_app_theme', curTheme); } event.addEventListener('app-theme-changed', themeChangeCallback);
样式开发
以上步骤完成后，观察 html 元素上的 theme 属性，切换客户端模式时，theme 值跟随变化。
可根据 html 此属性开发深色模式样式。
css 样式
// 浅色模式样式 .a { color: #FFFFFF; } // 深色模式样式 :root[theme="dark"] .a { color: #000000; }
内联样式
可封装函数获取模式值，根据模式值使用不同样式。