useTheme()
useTheme(
themeStorageKey
?,expirationDays
?):object
Defined in: src/hooks/state/useTheme.ts:102
Custom React hook to manage dark mode with automatic expiration.
- Detects system preference (
prefers-color-scheme: dark
). - Saves the user's selection in
localStorage
with an expiration time. - If the stored theme is older than
expirationDays
, it resets to system default (and localStorage is cleared). - Uses Tailwind CSS
.dark
class for styling.
Parameters
themeStorageKey?
string
= 'color-theme'
The key used in localStorage
to save the theme.
expirationDays?
number
= 3
The number of days before the stored theme expires.
Returns
object
An object containing:
isDarkTheme
: A boolean indicating if the dark theme is currently active.toggleTheme
: A function to toggle between light and dark themes.
isDarkTheme
isDarkTheme:
boolean
toggleTheme()
toggleTheme: () =>
void
Returns
void
Examples
tsx
import useTheme from './useTheme';
function App() {
const { isDarkTheme, toggleTheme } = useTheme();
return (
<div className="p-4">
<button onClick={toggleTheme} className="bg-skyblue px-4 py-2 text-white rounded">
{isDarkTheme ? "🌙 Dark Mode" : "☀️ Light Mode"}
</button>
</div>
);
}
tsx
function Example() {
const { isDarkTheme } = useTheme();
return <div className={isDarkTheme ? "dark-mode" : "light-mode"}>Hello, world!</div>;
}