Dark Mode

Installation

bash

npx gbs-add-block@latest -a DarkMode

The Dark Mode component allows users to toggle between light and dark themes in your application. It automatically detects user preferences and saves the selection in localStorage, ensuring a consistent experience across sessions.

Props Table

Prop Name	Type	Default Value	Description
`-`	`-`	`-`	This component does not accept any props directly. It manages its own state for dark mode.

Usage Example

Here’s an example of how to use the Dark Mode component in your project:

jsx

import { DarkMode } from "your-library";
 
const App = () => {
  return (
    <div>
      <h1>Your Application</h1>
      <DarkMode />
    </div>
  );
};
 
export default App;

Toggling dark mode manually

If you want your dark theme to be driven by a CSS selector instead of the prefers-color-scheme media query, override the dark variant to use your custom selector:

app.css

css

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark _));

Now instead of dark:_ utilities being applied based on prefers-color-scheme, they will be applied whenever the dark class is present earlier in the HTML tree:

html

<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

Customization

You can customize the icons displayed in the dark mode toggle by modifying the elements prop of the Icon component. Ensure the icons for both light and dark modes are defined in your icon paths.