import { useDarkMode } from '@ts-hooks-kit/core'
import { useLocalStorage } from '@ts-hooks-kit/core'
export default function DarkModeToggle() {
const { isDarkMode, toggle, enable, disable } = useDarkMode({
defaultValue: false,
localStorageKey: 'dark-mode',
})
const [storedValue] = useLocalStorage<boolean>('dark-mode', false)
return (
<div
className={`min-h-[320px] rounded-xl p-8 transition-colors duration-300 ${
isDarkMode ? 'bg-gray-900 text-gray-100' : 'bg-white text-gray-900'
}`}
>
<div className="mx-auto max-w-sm space-y-6">
<div className="text-center">
<span className="text-5xl" role="img" aria-label={isDarkMode ? 'Moon' : 'Sun'}>
{isDarkMode ? '\u{1F319}' : '\u{2600}\u{FE0F}'}
</span>
<h2 className="mt-3 text-2xl font-bold">
{isDarkMode ? 'Dark' : 'Light'} Mode
</h2>
</div>
<div className="flex justify-center gap-3">
<button
onClick={enable}
className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
isDarkMode
? 'bg-indigo-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
Dark
</button>
<button
onClick={toggle}
className="rounded-lg bg-indigo-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-600"
>
Toggle
</button>
<button
onClick={disable}
className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
!isDarkMode
? 'bg-amber-500 text-white'
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
}`}
>
Light
</button>
</div>
<div
className={`rounded-lg p-4 text-sm font-mono ${
isDarkMode ? 'bg-gray-800 text-gray-300' : 'bg-gray-100 text-gray-600'
}`}
>
<p>localStorage["dark-mode"]</p>
<p className="mt-1 font-semibold">{JSON.stringify(storedValue)}</p>
</div>
</div>
</div>
)
}
Dark Mode Toggle
Persist theme preference with useDarkMode and useLocalStorage.
Loading example...