🎨 房友平台主题色速查卡

快速查阅主题色配置，方便开发使用

可视化预览

想要查看更直观的颜色展示？
👉 点击查看主题色可视化预览页面 - 支持点击复制色值，包含按钮演示

---

核心色值

主题色（房友橙）

#ff7e00  ← 主题色，用于主按钮、链接、选中状态

主题色变体

颜色	色值	用途
🟠 深橙	#cc6500	按下状态、深色强调
🟠 标准橙	#ff7e00	主按钮、链接、高亮
🟠 浅橙	#ff9933	Hover 状态、次要强调
🟠 更浅橙	#ffb366	辅助背景、标签
🟠 极浅橙	#fff3e6	卡片背景、区域背景

功能色

类型	色值	使用场景
✅ 成功	#52c41a	成功提示、完成状态
⚠️ 警告	#faad14	警告提示、待处理
❌ 错误	#f5222d	错误提示、删除操作
ℹ️ 信息	#1890ff	信息提示、普通消息

---

快速使用

uni-app (fy_client)

// 直接使用变量
background-color: $uni-color-primary;        // #ff7e00
color: $uni-color-primary-light;             // #ff9933
border-color: $uni-color-primary-dark;       // #cc6500

Element Plus (fy_admin)

<!-- 组件自动应用 -->
<el-button type="primary">主按钮</el-button>

<!-- CSS 变量 -->
<style scoped>
.custom {
  color: var(--el-color-primary);              /* #ff7e00 */
  background: var(--el-color-primary-light-3); /* 浅色 */
  border: 1px solid var(--el-color-primary);
}
</style>

---

按钮颜色速查

主按钮:    背景 #ff7e00  文字 #ffffff  (强调操作)
次按钮:    背景 #ffffff  文字 #333333  (次要操作)
成功按钮:  背景 #52c41a  文字 #ffffff  (成功确认)
警告按钮:  背景 #faad14  文字 #ffffff  (警告操作)
危险按钮:  背景 #f5222d  文字 #ffffff  (删除操作)
文字按钮:  背景 透明     文字 #ff7e00  (链接操作)

---

配置文件位置

项目	配置文件	配置项
管理后台	fy_admin/src/stores/themeConfig.ts	primary: '#ff7e00'
客户端	fy_client/src/uni.scss	$uni-color-primary: #ff7e00

---

详细文档

查看完整主题色系统文档: 主题色系统配置