58 lines
1.7 KiB
TypeScript
Executable File
58 lines
1.7 KiB
TypeScript
Executable File
import { useEffect, useState } from 'react'
|
|
|
|
const THEME_KEY = 'tokenize_theme'
|
|
type Theme = 'light' | 'dark'
|
|
|
|
/**
|
|
* Get initial theme preference from localStorage or system preference
|
|
*/
|
|
function getInitialTheme(): Theme {
|
|
const saved = localStorage.getItem(THEME_KEY)
|
|
if (saved === 'light' || saved === 'dark') return saved
|
|
const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches
|
|
return prefersDark ? 'dark' : 'light'
|
|
}
|
|
|
|
/**
|
|
* ThemeToggle Component
|
|
* Allows users to toggle between light and dark modes
|
|
* Persists theme preference to localStorage and applies Tailwind's dark class
|
|
*/
|
|
export default function ThemeToggle() {
|
|
const [theme, setTheme] = useState<Theme>(() => getInitialTheme())
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
// Apply theme immediately on mount to prevent flash
|
|
const t = getInitialTheme()
|
|
if (t === 'dark') {
|
|
document.documentElement.classList.add('dark')
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!mounted) return
|
|
// Apply Tailwind dark mode
|
|
if (theme === 'dark') {
|
|
document.documentElement.classList.add('dark')
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
}
|
|
localStorage.setItem(THEME_KEY, theme)
|
|
}, [theme, mounted])
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition"
|
|
onClick={() => setTheme((t) => (t === 'dark' ? 'light' : 'dark'))}
|
|
title="Toggle light/dark mode"
|
|
>
|
|
{theme === 'dark' ? '🌙' : '☀️'}
|
|
</button>
|
|
)
|
|
}
|