A simple React + Tailwind dark mode toggle button component.
npm install react-tailwind-dark-togglebash
npm install react-tailwind-dark-toggle
`
---
Setup
This component works by toggling a dark class on the element. For it to work, you must enable Tailwind's class-based dark mode in your React Application.
DarkToggle Props
| Prop | Type | Default | Description |
| ------------- | -------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| lightIcon | ReactNode | SVG sun | Icon to display when the theme is dark, prompting a switch to light mode. |
| darkIcon | ReactNode | SVG moon | Icon to display when the theme is light, prompting a switch to dark mode. |
| className | string | "" | Custom Tailwind or CSS classes to style the button. |
| storage | "local" \| "session" \| "none" | "local" | Where to store preference:
- "local": uses localStorage
- "session": uses sessionStorage
- "none": resets on refresh |
| defaultMode | "light" \| "dark" \| "system" | "system" | The initial theme if no preference is stored:
- "light": starts light
- "dark": starts dark
- "system": follows OS preference |
---
Example Usage
`jsx
import DarkToggle from "react-tailwind-dark-toggle";
import { FiMoon, FiSun } from "react-icons/fi";
export default function Navbar() {
return (
);
}
``