主题替换与自定义指南

提醒

使用本文档前，请先查看 package.json 中 version 字段的版本号，然后阅读本文档对应章节

3.2.0 版本开始，Nexty.dev 使用 Tailwind v4

3.2.0 版本以前，Nexty.dev 使用 Tailwind v3

Nexty.dev 采用现代化的样式系统，基于 Tailwind CSS v4 和 CSS 变量构建，支持完整的亮色/暗色主题切换。本指南将帮助你理解如何替换和自定义项目主题。

v3.2.0+ 版本（Tailwind v4）

主题相关的文件主要位于以下位置：

styles/
├── globals.css          # 主要样式文件，包含主题变量和 Tailwind 配置
└── custom.utilities.css # 自定义样式类

通过 tweakcn.com 在线编辑器选择你想要的主题，然后点击右上角 Code 复制样式

替换 styles/globals.css 文件中 :root, .dark 和 @theme inline 部分的内容

v3.2.0 以下版本（Tailwind v3）

主题相关的文件主要位于以下位置：

styles/
├── globals.css      # 主要样式文件，包含主题变量和 Tailwind 配置
└── theme.css        # 自定义样式类

由于 theme.css 原本设计为渐变色配置，但这会增加主题修改难度，所以在修改主题前请先用下面的样式替换掉 theme.css 的代码：

提醒

导航站模板 nexty-directory 无需执行这一步

styles/theme.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer components {
  :root {
    --color-1: 0 100% 63%;
    --color-2: 270 100% 63%;
    --color-3: 210 100% 63%;
    --color-4: 195 100% 63%;
    --color-5: 90 100% 63%;
  }
}
@layer components {
  .title-gradient {
    @apply text-foreground/90;
  }
 
  .dark .title-gradient {
    @apply bg-clip-text bg-gradient-to-b from-foreground to-muted-foreground text-transparent;
  }
 
  .highlight-text {
    @apply text-primary dark:text-primary;
  }
 
  .highlight-bg {
    @apply bg-primary dark:bg-primary text-white;
  }
 
  .highlight-button {
    @apply text-white dark:text-white px-8 py-3 rounded-lg font-medium text-center shadow-lg transition-all duration-200;
    @apply bg-primary dark:bg-primary;
  }
 
  .card {
    @apply transition-all duration-300 border border-gray-200 dark:border-gray-700;
  }
 
  .card:hover {
    transform: translateY(-4px);
    @apply border-primary dark:border-primary;
  }
 
  .theme {
    --animate-rainbow: rainbow var(--speed, 2s) infinite linear;
  }
}
 
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}
 
@theme inline {
  @keyframes rainbow {
  0% {
    background-position: 0%;
    }
  100% {
    background-position: 200%;
    }
  }
}

通过 tweakcn.com 在线编辑器选择你想要的主题，然后点击右上角 Code 复制样式

替换 styles/globals.css 文件中 :root 和 .dark 部分的内容