主题定制

设置主题

通过 data-theme 属性设置初始主题：

<!-- 暗色主题 -->
<script src="..." data-theme="dark"></script>

<!-- 亮色主题（默认） -->
<script src="..." data-theme="light"></script>

用户可通过 Widget 内的主题按钮随时切换，选择会保存在 localStorage。

暗色模式

暗色模式下，Widget 的所有元素自动适配：

• 聊天气泡按钮 — 深色背景
• 聊天窗口头部 — 深色背景
• 消息气泡 — 深色配色
• 输入框 — 深色背景

手机端适配

手机端（≤480px）气泡按钮自动优化：

• 位置上移至距底部 100px（避开底部菜单）
• 尺寸缩小为 44px（不遮挡内容）
• 降低透明度（不干扰视线）

CSS 变量

Widget 使用 CSS 自定义变量控制样式，可在 chat-widget.css 的 :host 选择器中覆盖：

:host {
  --accent: #1a73e8;        /* 主色调 */
  --bg-primary: #ffffff;    /* 主背景 */
  --bg-bubble: #e8f4fd;     /* AI 消息气泡 */
  --text-primary: #1a1a1a;  /* 主文字 */
}