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>
  );
}