Dark Mode - Flowbite React

Overview#

Flowbite React provides built-in dark mode functionality that seamlessly integrates with popular full-stack frameworks like Next.js, Remix, Astro, and Gatsby. The dark mode implementation fully supports server-side rendering (SSR) and offers an intuitive developer experience.

Dark Mode Toggle#

The easiest way to implement dark mode in your application is by using the DarkThemeToggle component. This component automatically handles theme detection and provides a user-friendly interface for switching between light and dark modes.

import { DarkThemeToggle } from "flowbite-react";

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

Theme Mode Hook#

For more granular control over theme management, Flowbite React provides the useThemeMode hook. This powerful hook handles:

• Theme state management
• Automatic theme detection
• Theme persistence in LocalStorage
• Cross-tab theme synchronization

Hook API#

type ThemeMode = "light" | "dark" | "auto";

declare const useThemeMode: () => {
  mode: ThemeMode;
  computedMode: ThemeMode; // "light" | "dark"
  setMode: (mode: ThemeMode) => void;
  toggleMode: () => void;
  clearMode: () => void;
};

Features#

1. Automatic Theme Persistence: Your users' theme preferences are automatically saved in the browser's LocalStorage
2. Cross-Tab Synchronization: Theme changes are instantly synchronized across all open browser tabs
3. No Additional Configuration: All features work out of the box

Disabling Dark Mode#

To completely disable dark mode class generation in your Flowbite React application, you should use both of the following methods:

1. Using the Configuration File#

First, disable dark mode in your build configuration by setting the dark property to false in your .flowbite-react/config.json file:

{
  "$schema": "https://unpkg.com/flowbite-react/schema.json",
  "components": [],
  "dark": false,
  "path": "src/components",
  "prefix": "",
  "rsc": true,
  "tsx": true,
  "version": 4
}

This method prevents dark mode classes from being generated during the build process, which reduces your CSS bundle size.

2. Using the ThemeInit Component#

When you have custom configuration in your .flowbite-react/config.json (including disabling dark mode), you must render the ThemeInit component at the root level of your application to sync the runtime with your configuration:

// src/App.tsx
import { ThemeInit } from "../.flowbite-react/init";

function App() {
  return (
    <>
      <ThemeInit />
      {/* Your application */}
    </>
  );
}

Important: The configuration file approach affects build-time class generation, while the ThemeInit component ensures your runtime behavior matches your configuration.

Framework Integration#

For detailed, framework-specific implementation instructions, refer to our comprehensive integration guides:

• AdonisJS Dark Mode
• Astro Dark Mode
• Gatsby Dark Mode
• Next.js Dark Mode
• Remix Dark Mode