功能介绍
一、交互效果
以应用市场为例，在深色模式、浅色模式下的具体样式参考：
二、接口描述
注意：说明：
注意：userAgent：浅色模式时包含app_theme/light ；深色模式时包含app_theme/dark 。
应用可从 userAgent 获取初始模式，监听 JSAPI event app-theme-changed 感知模式变化。
三、步骤一：获取初始模式
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;
}
样式二：内联样式
可封装函数获取模式值，根据模式值使用不同样式。