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 ThemeConfig Component#

First, disable dark mode at the application level by setting the dark prop to false in the ThemeConfig component:

import { ThemeConfig } from "flowbite-react";

function App() {
  return (
    <>
      <ThemeConfig dark={false} />
      {/* Your application */}
    </>
  );
}

This approach prevents the dark mode toggle functionality from working in your application's runtime.

2. Using the Configuration File#

Additionally, you must 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
}

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

Important: For complete dark mode disabling, both methods should be used together. The ThemeConfig approach affects runtime behavior, while the config.json approach affects build-time class generation.

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