A User-Defined Color Scheme
for Next.js & Tailwind Apps
Features
- Enables your users to define a color scheme for your app
- Users can select a recurring color theme to be applied on return visits using the browser's
localStorage - Or, they can set the color theme to `Random` and enjoy a new, randomly picked color on each site visit, or on browser refresh
- Includes a dark/light/system mode toggle with the next-themes package.
- Default Tailwind color palette automatically adjusts when switching between light and dark modes to protect contrast ratios and ensure accessibility
Live Demo
This page is a live demo of the twNextThemer package. The npm component is installed in the top-right corner of the page under the sunmoon | paintbrush icon button. Click the icon to toggle between light and dark modes and to select a color theme.
Setup
Add twNextThemer to your Next.js project.
Wrap your application's entire content area with the ThemeProvider using next-themes (included dependency). This will commonly be inside of your layout.tsx file.
Adjust your tailwind.config.ts file to include the twNextThemer configuration plugin. This approach uses lodash (included dependency) to merge the plugin with your existing configuration.
Usage
To use the NextTailwindThemer in your application, simply add it to the appropriate parent component. The themer will most commonly be added to a header component.
Next, update the classNames of the UI elements that you'd like to match the chosen theme. You can replace any Tailwind color-definition class with `primary` or `secondary` to synchronize an element’s color with the selected theme. For example if your current button is:
And you want it to adhere to the themer, update your button's color classNames as such: