Next Themes

Installation

yarn add next-themes

Setup

import { ThemeProvider } from 'next-themes';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider attribute='class' defaultTheme='system'>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Usage

import { useTheme } from 'next-themes';
import { FiSun, FiMoon } from 'react-icons/fi';

export default function ThemeChanger() {
  const { theme, setTheme } = useTheme();
  <button
    className='border-thin dark:hover:border-green-200 dark:hover:text-green-200 hover:border-green-200 hover:text-green-200 rounded-md p-2.5 focus:outline-none'
    onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
  >
    {theme === 'light' ? <FiMoon size={20} /> : <FiSun size={20} />}
  </button>;
}