Theme Toggle

import { useTheme } from 'next-themes';

() => {
  const { theme, setTheme } = useTheme();
  return (
    <ThemeToggle
      theme={theme}
      onThemeChange={(newTheme) => setTheme(newTheme)}
    />
  );
};

This component inherits the props from the Icon Button, but doesn’t accept children. View source

Theme Toggle provides a standardised interaction and logic for toggling between the light and dark theme. You’ll need to supply the current theme and a function to set a new theme when the button is clicked.

A common problem with 2-way theme toggles is that after using them, you may be unable to switch back to the system theme. An alternative is to create a 3-way switch or a menu that lets you pick the system theme explicitly. However, this creates unnecessary mental overhead and takes the joy out of exploring an interface of an app.

Under the hood, rather than toggling between light and dark themes explicitly, Theme Toggle switches between the system theme and the other theme. This approach keeps the UI simple and playful without losing a way to respond to automatic system theme changes.

Theme Toggle doesn’t rely on React props to display the correct icon. Instead, it uses the CSS class name of the current theme, so the icon won’t flash when the UI hydrates – as long as your theming solution doesn’t come with its own hydration flash.