个性化设置

概述

个性化设置允许您通过自定义 CSS 样式来个性化应用的外观，让您的使用体验更加符合个人偏好。

个性化设置界面总览

自定义 CSS

您可以通过编写自定义 CSS 规则来修改应用界面的外观，包括颜色、字体、按钮样式等。

使用方法

打开个性化设置

进入 设置 → 主题 → 自定义 CSS 部分。

编写 CSS 规则

在文本框中输入您想要应用的 CSS 规则。例如：

button {
  background: red;
  color: white;
}

.my-class {
  font-size: 16px;
}

:root {
  --ui-accent: #8e47f0;
}

应用样式

点击"应用"按钮，您的自定义 CSS 将被立即应用到界面中。

保存更改

您的 CSS 规则会被保存并在下次启动时自动应用。

您可以针对特定元素类如按钮、输入框等或使用自定义类来定制样式。

CSS 自定义示例

修改按钮样式

button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
  padding: 10px 20px;
  border: none;
}

修改主题色

:root {
  --ui-accent: #8e47f0;
  --ui-primary: #667eea;
  --ui-background: #f5f5f5;
}

自定义字体

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
}

.chat-message {
  font-size: 16px;
  line-height: 1.6;
}

修改界面元素

.sidebar {
  background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
}

.card {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

使用技巧

CSS 变量

应用支持使用 CSS 变量来统一管理样式：

:root {
  --primary-color: #8e47f0;
  --secondary-color: #667eea;
  --text-color: #333333;
  --border-radius: 8px;
}

button {
  background: var(--primary-color);
  border-radius: var(--border-radius);
  color: white;
}

针对特定元素

使用类名或 ID 来针对特定元素进行样式修改：

.chat-input {
  border: 2px solid #8e47f0;
  border-radius: 10px;
}

#message-box {
  background: #f8f9fa;
}

响应式设计

您也可以添加媒体查询来实现响应式设计：

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
  }
  
  button {
    font-size: 14px;
  }
}

重置样式

如果您想要恢复默认样式，可以：

清空 CSS 文本框中的所有内容
点击"重置"按钮
样式将恢复到系统默认状态

清空或重置 CSS 后需要点击"应用"按钮才能生效。

注意事项

CSS 优先级

自定义 CSS 具有较高的优先级，会覆盖默认样式
使用 !important 可以进一步提高优先级，但应谨慎使用
建议使用具体的选择器而不是过度使用 !important

性能考虑

避免使用过于复杂的选择器
尽量减少使用通配符选择器（*）
注意动画效果对性能的影响

兼容性

确保使用的 CSS 属性在现代浏览器中得到支持
测试您的自定义样式在不同主题模式（浅色/深色）下的效果
注意不要破坏界面的可用性和可访问性

常见问题

如果遇到任何问题，可以随时重置 CSS 设置以恢复默认外观。

CSS 不生效

界面显示异常

样式在重启后丢失

目录