next-themes | theodorusclarence.com

Installation

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='border-thin dark:hover:border-accent-200 dark:hover:text-accent-200 hover:border-accent-200 hover:text-accent-200 rounded-md p-2.5 focus:outline-none'
    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