gabxyz / next-app-themes

Next.js starter template with themes support in the new app directory

next-app-themes

What is this

This is a basic next.js starter template with themes support in the new app directory.

Check the Live Demo

Main

• Next.js
• Typescript
• TailwindCSS

UI

• Radix Primitives
• Radix Colors
• Framer Motion
• Lucide Icons

Plugins

• windy-radix-palette
• tailwindcss-radix
• prettier-plugin-tailwindcss
• simple-import-sort

Utilities

• next-themes
• clsx
• prettier
• eslint

Others

• Vercel Analytics

Also some custom transitions from Carbon Design System

How does it work

To make next-themes work with the app directory, I basically implemented this solution, commented by @WITS in an issue in the next-themes repository.

This template comes with a providers.tsx component that is used to render ThemeProvider from next-themes using the "use client" directive, which is required for third-party packages in the new app directory. The providers.tsx component is rendered inside the body tag in the root layout.tsx.

There's also a theme-select.tsx component, that uses the useTheme hook to handle theme state and useState hooks for handling display value and animation states. This component was built with radix's dropdown-menu primitive and uses framer-motion for the animations.

Usage

You don't need to use tailwind dark: selectors for dark mode styles, since it's all handled automatically with radix colors and windy-radix-palette. I strongly recommend checking out the radix colors docs, they have detailed palette composition sections that help you understand how to use their color system.

You can also style any radix primitive component using the rdx-*: prefix in tailwind classes. See more in tailwindcss-radix

Run the following command to clone template using pnpm as your package manager

pnpm dlx create-next-app my-app --example "https://github.com/gabxyz/next-app-themes"

Now you can do whatever you want with it.