简约浅色主题

纯净明亮的界面设计，减少视觉干扰，专注于内容呈现

简约设计

去除多余装饰元素，使用清晰的布局和留白，让内容自然呈现

明亮色调

精心选择的浅色调方案，提供舒适的阅读体验，减轻视觉疲劳

层次分明

通过微妙的阴影和色彩变化，创建清晰的视觉层次结构

使用示例

以下是如何在您的项目中应用简约浅色主题的代码示例。您可以直接复制这些代码到您的CSS文件中使用。

/* 简约浅色主题变量 */
:root {
  --bg-color: #ffffff;
  --primary: #4361ee;
  --secondary: #3a0ca3;
  --text: #2b2d42;
  --accent: #f72585;
  --card-bg: rgba(255, 255, 255, 0.95);
  --border: rgba(0, 0, 0, 0.1);
}

/* 应用主题到容器 */
.theme-container {
  background-color: var(--bg-color);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
}

/* 卡片样式 */
.light-card {
  background: var(--card-bg);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.light-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

/* 按钮样式 */
.light-button {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
}

.light-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(67, 97, 238, 0.4);
}

/* 图标样式 */
.light-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 28px;
  color: white;
}

步骤1：定义主题变量

在CSS中定义简约浅色主题的颜色变量和设计参数

步骤2：应用容器样式

将主题样式应用到您的容器元素，添加适当的阴影和边框

步骤3：使用主题组件

使用.light-card和.light-button类为卡片和按钮添加主题样式