ImportantThis hook automatically updates the class and color-scheme of the html element. Ensure your CSS is configured to use the .dark class or CSS variables for a seamless transition.
TipSetting setUserTheme(null) will remove the override from localStorage and return the application to following the system-level OS theme (Light or Dark mode).
This hook manages dark/light mode logic. It monitors the prefers-color-scheme media query for system changes and allows users to override this via localStorage. It provides a utility function toggleTheme to switch between modes easily.
| Name | Type | Description |
|---|---|---|
| theme | Theme | The active theme string (e.g., 'light' or 'dark'). |
| setUserTheme | (theme: Theme | null) => void | Manually set a theme or reset to system by passing null. |
| systemTheme | Theme | The theme preference reported by the OS. |
| userTheme | Theme | null | The stored user override, if it exists. |
| toggleTheme | (options?: { dark?: Theme; light?: Theme }) => void | Toggles between two themes (defaults to 'dark'/'light'). |