Themes

NEXTDEVKIT includes a powerful theming system built on CSS variables and Tailwind CSS that supports light/dark mode, custom color schemes, and flexible customization while maintaining design consistency.

🏗️ Theme System Architecture

NEXTDEVKIT's theme system is structured as follows:

src/
├── app/
│   └── globals.css               # Theme definitions and CSS variables
├── components/
│   └── ui/                      # Themed UI components
├── config/
│   └── index.ts                 # Theme configuration
└── styles/
    └── docs-mdx.css             # Documentation-specific styles

🎯 Core Theme Features

Theme Configuration

NEXTDEVKIT's theme configuration is located in src/config/index.ts:

ui: {
  theme: {
    enabled: true,
    defaultMode: "system",
  },
},

Configuration Options:

• enabled: Whether to enable the dark/light theme system
• defaultMode: The default mode to use when no mode is specified, can be light, dark, or system

Built-in Light/Dark Mode Support

NEXTDEVKIT provides automatic light/dark mode switching with smooth transitions:

:root {
  // ...
}

.dark {
  // ...
}

@theme inline {
  // ...
}

Customizing Colors

NEXTDEVKIT is fully compatible with Tailwind CSS's @theme directive, which allows you to customize colors using tweakcn.

You can update the theme colors in the src/app/globals.css file.

Just Copy the color code from TweakCN and paste it into the src/app/globals.css file.

Replace the :root, .dark, and @theme inline blocks with the new color code.

Or you can try the command pnpm dlx shadcn@latest add to generate the theme code.

pnpm dlx shadcn@latest add https://tweakcn.com/r/themes/claude.json

Documentation Theme

The documentation theme is a custom theme for the documentation site.

It is located in the src/styles/docs-mdx.css file.

@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";

You can follow the Fumadocs documentation to customize the documentation theme.

🔗 Related Resources

• OKLCH Color Space
• Tailwind CSS Theming

🎯 Next Steps

Now that you understand the theme system, explore these related features:

• 📊 Analytics
• 🔍 SEO
• �� I18n