51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
|
|
// Cookie utility functions
|
|
const setCookie = (name: string, value: string, days: number = 365) => {
|
|
const expires = new Date()
|
|
expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000))
|
|
document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`
|
|
}
|
|
|
|
const getCookie = (name: string): string | null => {
|
|
const nameEQ = name + "="
|
|
const ca = document.cookie.split(';')
|
|
for (let i = 0; i < ca.length; i++) {
|
|
let c = ca[i]
|
|
while (c.charAt(0) === ' ') c = c.substring(1, c.length)
|
|
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length)
|
|
}
|
|
return null
|
|
}
|
|
|
|
// Apply theme to document
|
|
const applyTheme = (theme: 'light' | 'dark') => {
|
|
document.documentElement.classList.remove('light', 'dark')
|
|
document.documentElement.classList.add(theme)
|
|
document.documentElement.setAttribute('data-theme', theme)
|
|
}
|
|
|
|
export const useTheme = () => {
|
|
const [theme, setTheme] = useState<'light' | 'dark'>('light')
|
|
|
|
useEffect(() => {
|
|
// Get theme from cookie on mount
|
|
const storedTheme = getCookie('theme') as 'light' | 'dark' | null
|
|
if (storedTheme) {
|
|
setTheme(storedTheme)
|
|
applyTheme(storedTheme)
|
|
} else {
|
|
// Default to light theme and apply it
|
|
applyTheme('light')
|
|
}
|
|
}, [])
|
|
|
|
const changeTheme = (newTheme: 'light' | 'dark') => {
|
|
setTheme(newTheme)
|
|
setCookie('theme', newTheme)
|
|
applyTheme(newTheme)
|
|
}
|
|
|
|
return { theme, changeTheme }
|
|
}
|