主题 & 自定义

AI Anywhere 的主题系统允许您自定义助手的外观和感觉。从按钮颜色到字体，您可以让助手与您网站的设计无缝融合，或通过品牌颜色脱颖而出。您可以通过自定义颜色和样式来设计自己的浅色和深色模式，以匹配您网站的外观。

按钮颜色自定义

助手按钮颜色是最显眼的自定义选项之一。您可以将其设置为匹配您的品牌或网站主题。

设置按钮颜色

在仪表板的助手配置中，导航到主题设置。在这里，您可以使用以下方法设置主按钮颜色：

• 颜色选择器： 从颜色选择器界面中直观地选择颜色
• 十六进制代码： 输入特定的十六进制颜色代码（例如， #4B0076 紫色， #007bff 蓝色）
• RGB 值： 如果您愿意，可以指定 RGB 值（自动转换为十六进制）

/* 示例：将按钮颜色设置为品牌紫色 */
按钮颜色： #4B0076

标签颜色

标签文字颜色（按钮上显示的文字）会根据您的按钮颜色自动调整对比度。如果您的按钮是深色的，文字将是浅色的；如果是浅色的，文字将是深色的。这确保了可读性，同时保持您选择的美学风格。

创建浅色和深色模式

虽然 AI Anywhere 不包含预设的深色模式，但您可以通过自定义按钮颜色、文字颜色和其他样式选项来设计自己的浅色和深色主题实现，以匹配您网站的设计。

设计深色模式

要为您的助手创建深色模式外观：

• 使用较深的按钮颜色： 选择深色（例如， #1a1a1a, #2d3748) 用于深色主题网站
• 调整文字颜色： 确保适当的对比度以提高可读性 - 深色按钮配浅色文字，或自定义标签颜色
• 匹配您网站的调色板： 选择与您的深色模式配色方案一致的颜色

<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
<textarea id="message"></textarea>
<span data-helper-anchor data-helper-token="your-helper-token"></span>

您配置的按钮颜色将决定外观。深色模式使用较深的颜色，浅色模式使用较浅的颜色。

字体系列自定义

您可以自定义助手使用的字体系列以匹配您网站的排版。这包括按钮文字和任何助手界面元素。

设置字体系列

在仪表板的助手配置中，导航到主题设置，您可以从多种字体系列中进行选择，包括：

• 网页安全字体（Arial, Helvetica, Georgia, Times New Roman）
• 现代无衬线字体（Inter、Roboto、Open Sans、Lato）
• 衬线字体（Merriweather、Playfair Display）

助手将为所有文本元素使用所选字体系列，确保与您网站设计的视觉一致性。

按钮样式：圆角与方角

选择圆角（药丸形）或方角按钮样式，以匹配您网站的设计语言。

圆角按钮

圆角按钮具有完全圆润的角，赋予其现代、友好的外观。此样式适合现代设计和柔和品牌美学。

方角按钮

方角按钮具有锐利、简约的角，与更几何化、结构化的设计相符。它们传达出专业、企业的感觉。

颜色代码示例

以下是一些您可能使用的常见颜色代码：

• 紫色： #4B0076 （AI Anywhere 默认）
• 蓝色： #007bff
• 绿色： #28a745
• 红色： #dc3545
• 黄色： #ffc107
• 灰色： #6c757d

设计最佳实践

部署前预览

在让助手上线之前，使用仪表板中的预览功能查看您的定制化效果。这有助于您：

• 验证颜色选择是否与您的品牌匹配
• 检查可读性和对比度
• 确保按钮样式符合您网站的美学
• 如适用，测试您的自定义浅色和深色模式设计

请记住：在助手配置中进行主题更改后，重新生成代码片段以获取包含新主题设置的更新代码，然后使用新代码片段更新您的网站。