Dark Mode - Flowbite React
Learn how to implement and customize dark mode in your React application using Flowbite and Tailwind CSS. Includes step-by-step instructions for theme switching, SSR support, and framework-specific integrations.
#
OverviewFlowbite 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 ToggleThe 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 HookFor 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 APItype ThemeMode = "light" | "dark" | "auto";
declare const useThemeMode: () => {
mode: ThemeMode;
computedMode: ThemeMode; // "light" | "dark"
setMode: (mode: ThemeMode) => void;
toggleMode: () => void;
clearMode: () => void;
};
#
Features- Automatic Theme Persistence: Your users' theme preferences are automatically saved in the browser's LocalStorage
- Cross-Tab Synchronization: Theme changes are instantly synchronized across all open browser tabs
- No Additional Configuration: All features work out of the box
#
Disabling Dark ModeTo completely disable dark mode class generation in your Flowbite React application, you should use both of the following methods:
#
1. Using the Configuration FileFirst, 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 ComponentWhen 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 IntegrationFor detailed, framework-specific implementation instructions, refer to our comprehensive integration guides: