React Dark Mode - Flowbite

Learn how to configure and build a dark mode switcher for Flowbite using Tailwind CSS and start developing with the components from the library

Table of Contents#

Toggle dark mode#

Surround the contents of your app with the <Flowbite> component, and add the <DarkThemeToggle> component inside it. The <DarkThemeToggle> component will automatically detect the current theme and display the correct icon, and allow the user to switch between themes as they like.

import { DarkThemeToggle, Flowbite } from 'flowbite-react';

export default function MyPage() {
  return (
    <Flowbite>
      ...
      <DarkThemeToggle />
      ...
    </Flowbite>
  );
}