Theme Customization Guide

Note

Before using this document, please check the version number in the version field of package.json, then read the corresponding section of this document

Starting from version 3.2.0, Nexty.dev uses Tailwind v4

Before version 3.2.0, Nexty.dev uses Tailwind v3

Nexty.dev adopts a modern styling system built on Tailwind CSS v4 and CSS variables, supporting complete light/dark theme switching. This guide will help you understand how to replace and customize your project theme.

v3.2.0+ Versions (Tailwind v4)

Theme-related files are primarily located in the following locations:

styles/
├── globals.css          # Main style file, contains theme variables and Tailwind configuration
└── custom.utilities.css # Custom utility classes

Select your desired theme through the tweakcn.com online editor, then click Code in the upper right corner to copy the styles

Replace the :root, .dark, and @theme inline sections in the styles/globals.css file

Versions Below v3.2.0 (Tailwind v3)

Theme-related files are primarily located in the following locations:

styles/
├── globals.css      # Main style file, contains theme variables and Tailwind configuration
└── theme.css        # Custom utility classes

Since theme.css was originally designed for gradient color configuration, which increases the difficulty of theme modification, please replace the code in theme.css with the following styles before modifying the theme:

Note

The nexty-directory boilerplate does not need to perform this step

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%;
    }
  }
}

Select your desired theme through the tweakcn.com online editor, then click Code in the upper right corner to copy the styles

Replace the :root and .dark sections in the styles/globals.css file