next-themes

Next themes library configuration for dark mode with tailwindcss

––– views

Installation

Library from next-themes

yarn add next-themes
bash

_app.js

import { ThemeProvider } from 'next-themes';
function MyApp({ Component, pageProps }) {
return (
<ThemeProvider attribute='class' defaultTheme='system'>
<Component {...pageProps} />
</ThemeProvider>
);
}
export default MyApp;
js

Set on button (Nav.jsx)

import { useTheme } from 'next-themes';
import { FiSun, FiMoon } from 'react-icons/fi';
export default function Nav() {
const { theme, setTheme } = useTheme();
<button
className='p-2.5 focus:outline-none rounded-md border-thin hover:border-accent-200 dark:hover:border-accent-200 hover:text-accent-200 dark:hover:text-accent-200'
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
>
{theme === 'light' ? <FiMoon size={20} /> : <FiSun size={20} />}
</button>;
}
jsx

Extend tailwind.config.js

module.exports = {
purge: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
colors: {
accent: {
100: '#DBFF00',
200: '#00FF94',
300: '#00E0F3',
},
},
},
},
};
js