主题

AI 辅助修改

你可以在 Cursor 编辑器直接对话修改主题样式。

示例 Prompt:


把项目的主色调改为粉色。

theme change

手动修改

项目主题色调都定义在src/global.css文件中。主要包含以下几个部分：

1. 基础颜色变量

在:root选择器中定义了所有基础颜色变量：


:root {
  /* 主题色变量 */
  --primary: 260 51% 48%;      /* 主色调 #673AB7 */
  --primary-dark: 257 59% 60%; /* 深色主题主色调 #512DA8 */
  --secondary: 257 44% 85%;    /* 次要色调 #D1C4E9 */
  --accent: 257 100% 65%;      /* 强调色 #7C4DFF */
  
  /* 文本颜色 */
  --foreground: 0 0% 13%;      /* 主文本色 #212121 */
  --muted-foreground: 0 0% 46%; /* 次要文本色 #757575 */
  
  /* 背景颜色 */
  --background: 0 0% 100%;     /* 背景色 #FFFFFF */
  --muted: 0 0% 96%;          /* 次要背景色 */
  
  /* 边框和输入框 */
  --border: 0 0% 74%;         /* 边框色 #BDBDBD */
  --input: 0 0% 90%;          /* 输入框边框色 */
  --ring: 260 51% 48%;        /* 焦点环色 */
}

2. 渐变背景

项目中定义了三种渐变背景样式：


/* 主渐变背景 */
.gradient-bg {
  background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%);
}
 
/* 浅色渐变背景 */
.gradient-bg-light {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
}
 
/* 深色渐变背景 */
.gradient-bg-dark {
  background: linear-gradient(135deg, #4527a0 0%, #311b92 100%);
}

3. 网格图案背景

网格背景使用主题色的透明版本：


.bg-grid-pattern {
  background-image: 
    linear-gradient(rgba(103, 58, 183, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 58, 183, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
}

4. 按钮样式

按钮使用主题色的渐变：


.btn-gradient {
  background: linear-gradient(135deg, #673AB7 0%, #512DA8 100%);
  transition: all 0.3s ease;
}
 
.btn-gradient:hover {
  box-shadow: 0 10px 25px rgba(103, 58, 183, 0.3);
}

修改主题色

要修改主题色，你需要：

选择新的主色调（建议使用 Material Design 色板）
更新:root中的颜色变量
更新渐变背景中的颜色值
更新网格图案中的颜色值
更新按钮样式中的颜色值

例如，要改为粉色主题，可以使用以下颜色：

主色调：#EC407A
深色主题：#E91E63
次要色调：#FCE4EC
强调色：#D81B60

注意：颜色值使用 HSL 格式，你可以使用在线工具将 HEX 转换为 HSL。