useTheme()

useTheme(themeStorageKey?, expirationDays?): object

Defined in: src/hooks/state/useTheme.ts:100

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

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>
  );
}

function Example() {
  const { isDarkTheme } = useTheme();

  return <div className={isDarkTheme ? "dark-mode" : "light-mode"}>Hello, world!</div>;
}