This is a basic next.js starter template with themes support in the new app directory.
Check the Live Demo
Also some custom transitions from Carbon Design System
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.
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.