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.