霓虹暗黑主题

深邃的暗色调配合霓虹光影，创造独特的科技美学体验

精心调色

专业的色彩搭配方案，完美平衡视觉舒适度与美学表现

动态效果

流畅的动画和渐变效果，增强用户体验和沉浸感

明暗模式

支持动态明暗切换，满足不同使用环境和偏好需求

使用示例

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

/* 霓虹暗黑主题变量 */
:root {
  --bg-color: #0f0f1b;
  --primary: #fc5c7d;
  --secondary: #6a82fb;
  --text: #e2e8f0;
  --accent: #38ef7d;
}

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

/* 创建霓虹背景效果 */
.theme-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle,
      rgba(252, 92, 125, 0.1) 0%,
      rgba(106, 130, 251, 0.05) 40%,
      transparent 70%);
  animation: rotate 15s linear infinite;
  z-index: 0;
}

/* 旋转动画 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 按钮样式 */
.neon-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;
}

.neon-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(252, 92, 125, 0.3);
}

/* 卡片样式 */
.neon-card {
  background: rgba(30, 35, 65, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(100, 130, 255, 0.2);
  border-radius: 15px;
  padding: 25px;
  transition: all 0.3s ease;
}

.neon-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  border-color: var(--primary);
}

步骤1：添加CSS变量

在您的CSS文件或style标签中定义霓虹暗黑主题的颜色变量。

步骤2：应用主题样式

将主题样式应用到您的容器元素，添加霓虹背景效果和动画。

步骤3：使用主题组件

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